I'm trying to style all html with the class called sample
<div class="sample">
</div>
.sample{
}
But I'm running into a situation where the class sample could be nested. In this case I want to style only the inner one. How can I tell the css to apply the style only to the inner div and not to the outer sample? Can this be done?
<div class="sample">
<div class="sample">
</div>
</div>
Use the descendant selector for your ruleset:
.sample .sample
If you want to maintain the style on your outer div, then I'd suggest giving it another class, like
.something .sample
Using the same class for all the elements on a page is highly discouraged.
You could use Child Selectors:
div>.sample {}
or:
div.sample>.sample {}
Related
Currently I have the following piece of code available which needs to be styled:
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
I would like to keep the HTML as-is and style the 'p' of both the summary and the body in a different way.
Is that possible? How? Thank you!
Yep it is :
div p:nth-child(1){
color: red;
}
div p:nth-child(2){
color: blue;
}
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
You need to use :nth-child() cssSelector to apply different styles for each tag. Look at below example.
div p:nth-child(1){
color:red;
}
div p:nth-child(2){
color:green;
}
You can either do that:
<p style="background-color:#000000;"></p>
Or do that:
First, add the "id" tag in your paragraphs tags.
<p id="bodyParagraph"></p>
Second, on the head tags include the:
<style>
#bodyParagraph{
background-color:#000000;
}
</style>
Why wouldn't you want to add specific classes to the summary paragraph and another for the body paragraph? Nothing wrong with that.
<p class="summary"> and <p class="body"> with their respective styling.
If you really want to avoid using a specific class for each, I'd suggest checking out the :first-child and nth-child pseudo-elements, so you style the first paragraph of that particular div one way and any other paragraphs a different way.
Assuming that the body paragraph might be multiple paragraphs, I'd strongly recommend against this approach since it will be hacky, more confusing, and more time consuming than just giving each paragraph its own style.
Sources:
W3Schools - first-child pseudo-element and W3Schools - nth-child pseudo-element
Hi I have a scenario where I have to style a h3 element based on parent div class
Example:
<div class="First">
<p>This is sample text</p>
</div>
<div class="Second">
<h3>This is sample header</h3>
</div>
Now what I want to do is if there is a p tag inside class named First, I want to change the style of h3 tag of second class.
Answer: Without altering the HTML, this is currently not possible with CSS alone.
Further information: The CSS Selectors Level 4 specs introduce(d) the new parent selector $:
$div > p {
// styles here
}
The selector above would target the div, not the p. Of course, only divs, which have a direct p child element. Still, this wouldn't help much with further additions and as BoltClock noted, the specs haven't been revised for a couple of years and a parent selector might not even come soon.
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 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.