I am very new to css and Sencha Touch 2. While working on some tutorial on Sencha Touch 2,I see a CSS file having code like
/* Increase height of list item so title and narrative fit */
.x-list .x-list-item {
min-height: 10.5em!important;
height:7.5em;
}
/* Move the disclosure button up to account for the list item height increase */
.x-list .x-list-disclosure {
position: absolute;
bottom: 4.0em;
right: 0.10em;
}
Is .x-list .x-list-item a css nesting concept and x-list a class name?
Also , is this concept purely a CSS concept or Sencha Touch concept?
It's just a pure CSS concept, so this syntax means
.x-list .x-list-item
Select an element with class x-list-item which is nested under element having class x-list
The same goes for second syntax.
If you want to make it more stricter, you can use element.class selector so it will select only if it matches element.class combination, so if taken your example..
Using something like
div.x-list span.x-list-item {
/* This will select span only which is having a class
x-list-item which is nested under div element having class
x-list */
}
Related
Similar to this question, I want a button with ID dont-apply-global-style-1 to not apply width: 130px, thus I change the css rule label, input, button: { width: 130px } to :
label,
input,
button:not(#dont-apply-global-style-1 *) {
width: 130px;
}
But it does not work. The following button still applies width: 130px:
Additionally, I see toggles (Toggle) without the id dont-apply-global-style-1 also applies width: 130px, it seems that these rules have priority now, this did not happen before.
(a toggle without the id dont-apply-global-style-1 before changing the rule:)
(a toggle without the id dont-apply-global-style-1 after changing the rule:)
Could anyone tell me what's the safe way to private a button element from a global rule?
Your first problem is that you are selecting all element inside #dont-apply-global-style. The reason is the * selector. So it will still apply it style to the the button element.
Your second problem happends, because :not() and some other pseudo selectors will add the css specificity inside its rules to the total specificity. So your final specificity will be 1-0-1.
You can lower it with the :where() pseudo selector. Its specificity, inside it, will not be added to the total specificity.
button:where(:not(#c)) {
width: 130px;
}
.b {
width: 200px;
}
<button>a</button>
<button class="b">b</button>
<button id="c">c</button>
I see some e.g. div/button style in Chrome console like this:
/* Chrome browser styles tab */
.ItemClass1-0-3-171.ItemClass2-0-3-173: {
background-color: "red"
}
How do I define a new style in CSS ignoring that class numbers? because it can be a different number for other div/button on the page..
/* CSS file */
.ItemClass1.ItemClass2 {
background-color: "blue"
}
You can use two attribute contains selectors for this.
[class*="ItemClass1"][class*="ItemClass2"] {
background-color: red;
}
<p class="ItemClass1-0-3-171 ItemClass2-0-3-173">foo</p>
But keep in mind that this will also select elements with the class fooItemClass2.
You can use an attribute selector with a starts-with value to pick up anything that starts with ItemClass.
Note: This solution assumes ItemClass is the first classname and doesn't account for whether the element has both classes. For these reasons Sven's answer might better suit your needs.
[class^='ItemClass'] {
background-color: blue;
padding: 4rem;
}
<div class="ItemClass1-0-3-171.ItemClass2-0-3-173"></div>
May not be the best wording for my question, here's what I'm trying to accomplish.
I'm using Angular2 app with bootstrap 3 styling, where we are using many components (directives in angular1.x). This also leads to us having components inside components.
On one of my pages, I have the bootstrap class .well, and then there's another component inside that one that also utilizes .well. So if you're familiar with bootstrap, a .well inside another .well yields quite a bit of padding.
So, I want to write a css selector where I remove the padding for the inner .well when it's inside another .well.
Here's what I've tried so far:
.well .well {
padding: 0;
}
div#doubled-up-well .well {
padding: 0;
}
div.well .well {
padding: 0;
}
div.well form.well {
padding: 0;
}
None of these seem to work, what am I doing wrong here?
Here's how it's structured to give a better idea:
<div class="well" id="doubled-up-well">
<my-custom-component>
<form class="well {some more angular classes here}"></form>
</my-custom-component>
</div>
Does it have to do with there being more classes defined on my form element? Is it because there's an element in between my div and my form (which is why I DIDN'T use the > in my CSS selector)?
Edit: I've also tried these:
div#doubled-up-well > member-add-member-demo > form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
div#doubled-up-well form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
Edit: Here's the fiddle with the exact html that is rendered on the page. FYI - the fiddle WORKS, it's only not working in my actual app.
https://jsfiddle.net/rv69f6ok/2/
I've run into this issue as well, and in my case it was because I had to write the styles in the specific component in which they need to be modified. If I tried to write .well .well in a global css or in the css of the parent component, it wouldn't work because the styles for each component are isolated to that specific component.
So in your case, I'd write a style for .well in the component that's the child, where you want to get rid of the padding. If you're using that component in other areas where you don't want that reduced padding to apply, I'd probably add some class to the same element where the child .well class is included. That extra class can serve as a flag that will have its own reduced padding value, and will overwrite the .well class your css by adding specificity like .foo.well { padding: 0; }
At the moment, my usual approach to supporting right-to-left (RTL) languages in a template is to simply add a .rtl class to the body tag, then go through all my existing left-to-right CSS and add left/right overrides as appropriate.
For example, my site menu might be positioned like so by default as below:
.site-nav {
position: absolute;
left: 0;
top: 0;
}
...and then manually overridden for RTL languages this way (using some template logic at a CMS level to add the .rtl class to body):
.rtl .site-nav {
left: auto;
right: 0;
}
My issue is that this seems labour-intensive and not very effecient. I was wondering what solutions others might have come up with to make this simpler.
As an aside, I'm using a Compass environment to generate my CSS. But I don't know how to escape back from the current nesting to write a .rtl modifier adjacent to the current element's default styles. This in theory would be extremely useful, however, but I simply don't know if it's possible to perform a lookup all the way back to the body element or not whilst within a deeply-nested Sass rule.
Add your .rtl-class whereever you want to change the textflow. Even when you don't want to change it (for "normal" languages).
Don't use the class in your default css-file.
Add a css-file which only includes
.rtl {
left: auto;
right: 0;
}
whenever you have a rtl-language. In case you want all your divs to behave that you you could replace .rtl with div as well.
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.