I have a bunch of divs which I nest arbitrarily:
<div>
<div>
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
I make their contents pink with a rule like this:
div { color: pink; }
I want to be able to add the special class to any of those divs to cancel out the pink rule for it and all of its children. For example, if I add the special class to this div,
<div>
<div class="special">
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
then "Apple," "Banana," and "Grape" should no longer be pink.
Can I tweak my rule to only match divs that aren't nested inside a .special?
I'm not looking for a solution involves writing a rule for .special that cancels out every style defined on div. For example, this is not a good solution even though it works:
.special, .special div { color: black !important; }
My actual styles are more complicated than just changing the color, and there are other rules with selectors like div span which I would also like to disable with the special class.
You cannot prevent children/descendants from inheriting inheritable style properties using CSS.
The style properties for the descendants have to explictly be reset.
Related
here is the simple html sample:
<div class='parent'>
parent div
<div class='myDiv'>
child div
</div>
</div>
I want change child div style based on parent property style. I do not want to use #media for child. But e.g. once parent changes its background color to something specific then I want change child background color, e.g. change child background only if parent changed to RED. Is that possible?
Yes, but neither with CSS or Sass, since Sass is based on CSS and the latter does not support conditional statements (yet). You will have to use Javascript instead.
You can however apply a certain styling to a descendent if a certain selector matches the parent.
// HTML
<div class="red">
Parent
<div>
Child
</div>
</div>
// SCSS
.red {
background-color: red;
> div {
color: green;
}
}
https://codepen.io/LudwigGeorgImmanuel/pen/abmPJmZ
I have nested div elements with image in one of nested div on my page layout. I want to write CSS style for align image to right. How I do that:
I actually want to know how i access nested div <div id="Imagepart1" class="new1 new1-50 adjust-right"> for writing CSS style in order to align image to right. This is how div within divs looks like:
<div id="Testcase1" class="item1 module">
<div id="Div1" class="new-block">
<div id="Imagepart1" class="new1 new1-50 adjust-right">
<div class="new-gutter">
<div>
<img alt src="/sitecollectioImages/MyWork/exampleimage.png">
</div>
</div>
</div>
</div>
</div>
It all depends on the specificity required to apply your style. You have a few options:
.adjust-right { float: right; } might be enough, this has a
specificity of 0,0,1,0.
You could also use multiple classes to target the DIV,
.item1.adjust-right { float: right; }, this has a specificity of 0,0,2,0.
If not enough you can hook into the id attribute, #Imagepart1 { float: right; }, this has a specificity of 0,1,0,0.
More on specificity here.
It is preferred to style via options 1 and 2 and leave IDs as JS hooks.
Update
OP asked about using multiple CSS classes in the selector and what the difference is when leaving a space between the classes and not.
When there IS NOT a space between CSS classes in the CSS selector then all those classes must be present on an element for the selector to match. Without a space you are saying find class X, then see if class Y appears on the same element as class X.
If there IS a space between CSS classes in the CSS selector then you are targeting items that are nested. With each space you are saying (from left to right) find class X, then any element inside of element with class X find an element with class Y.
<!-- #1 -->
<div class="outer right">
<!-- #2 -->
<div class="inner left">
<!-- #3 -->
<div class="core right"></div>
</div>
</div>
Given the above markup the following selectors will:
.outer.right, NO SPACE, selects the outer most DIV (#1). Requires that BOTH the .outer and .right class appear on the same element (order does not matter).
.outer .right, WITH SPACE, selects the inner most DIV (#3). Requires that .right appear on an element somewhere inside of an element with .outer.
An 'id' can be accessed with the '#' symbol and classes can be accessed via the dot operator '.' http://www.w3schools.com/css/css_syntax.asp
So you can actually target the div you described with
#Imagepart1{
float: right
}
or accessing one of the classes attached to it
.adjust-right{
float: right
}
or explicit use of all the classes
.adjust-right.new.new1-50{
float: right;
}
This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.
I saw this selector in Twitter Bootstrap:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Does anyone know what this technique is called and what it does?
It's an attribute wildcard selector. In the sample you've given, it looks for any child element under .show-grid that has a class that CONTAINS span.
So would select the <strong> element in this example:
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
You can also do searches for 'begins with...'
div[class^="something"] { }
which would work on something like this:-
<div class="something-else-class"></div>
and 'ends with...'
div[class$="something"] { }
which would work on
<div class="you-are-something"></div>
Good references
CSS3 Attribute Selectors: Substring Matching
The 30 CSS Selectors you Must Memorize
W3C CSS3 Selectors
.show-grid [class*="span"]
It's a CSS selector that selects all elements with the class show-grid that has a child element whose class contains the name span.
The Following:
.show-grid [class*="span"] {
means that all child elements of '.show-grid' with a class that CONTAINS the word 'span' in it will acquire those CSS properties.
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
All of the elements get hit except for the <span> by itself.
In Regards to Bootstrap:
span6 : this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thus span6 would have a width of 50%.
In the current day implementation of Bootstrap (v.3 and v.4), you now use the .col-* classes (e.g. col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1 and Bootstrap 3.3.7 for more documentation. I would recommend going with a later Bootstrap nowadays
It selects all elements where the class name contains the string "span" somewhere. There's also ^= for the beginning of a string, and $= for the end of a string. Here's a good reference for some CSS selectors.
I'm only familiar with the bootstrap classes spanX where X is an integer, but if there were other selectors that ended in span, it would also fall under these rules.
It just helps to apply blanket CSS rules.
In my case I'm unable to apply background color for class due to dynamic change of class name with numbers
Ex:
Issue:
body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Solution:
body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Reference: link
I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS:
div:not(.no) span{background-color:#00f;}
Here's the HTML
<div>
<span>yes 1</span>
</div>
<div class="no">
<span>no 1</span>
</div>
<div class="no">
<div>
<span>no 2</span>
</div>
</div>
Two questions:
Why does my CSS apply to both yes 1 and no 2?
Why does the whole thing break if I switch to a universal selector?
*:not(.no) span{background-color:#00f;}
Here's the code in JSFiddle: http://jsfiddle.net/stephaniehobson/JtNZm/
Both of the span elements' parent div elements don't have the class no, regardless of whether any other ancestors do have it or not:
<div> <!-- This is div:not(.no), pretty much a given -->
<span>yes 1</span>
</div>
<div class="no"> <!-- In this case, although this is div.no... -->
<div> <!-- ... this is div:not(.no)! -->
<span>no 2</span>
</div>
</div>
Both html and body, which are ancestors of your div and span elements, satisfy *:not(.no) when using a universal selector (or rather, when omitting a type selector). This causes all of your span elements to have the background color.
One solution to this is to anchor your negation filter to the body element using the child combinator, if your top-level div elements will always be children of body:
body > div:not(.no) span { background-color: #00f; }
jsFiddle demo
Another solution is to simply use override styles.
BoltClock is correct. It might make more sense if you phrase the selector like this:
Select any span element
that is descended from a div element
whose class value does not contain the word no.
Each of the selected spans in your example is in fact descended from a div whose class value does not contain the word no—the fact that the second of them is also descended from a div whose class value does contain the word no doesn’t negate (ha!) the previous statement.
What’s interesting is I would wager that if you moved the second no down a level, the second span would still be matched. CSS doesn’t have a notion of element proximity, so any ancestor div should suffice to match the selector, regardless of whether it’s “closer” to the span or not.
I think the best choice is to split your statement into 2:
div span { background-color:#00f; }
.no span { background-color:#fff; }
You can see the effect here: http://jsfiddle.net/JHTqp/