There are tens of CSS rules I would like to be applied on a section of a page - this part is easy:
.generalStyles a,p,button,div.foo {
/* many styling rules here*/
}
However, when I mark a section of a page with class="generalStyles", I would like certain subsections not to inherit those styles, such as descendants of class="noGeneralStyles" (1). This should work with arbitrary nesting.
What I am looking for is a selector that could be translated into:
Inherit CSS rules if you are a descendant of .generalStyles, but not
when .noGeneralStyles is a closer parent
An interactive jsFiddle example can be found here
EDIT: The solution (if there is any) should not make any assumptions of inner HTML
(1) - the reason is there are way too many CSS rules to reset
You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.
How about using direct descendant selectors? > means it will select button tag, which is direct child to an element having class noGeneralStyles or generalStyles
Demo
.noGeneralStyles > button {
color: black;
}
.generalStyles > button {
color: red;
}
Related
This question already has an answer here:
Difference in applying CSS to html, body, and the universal selector *?
(1 answer)
Closed 3 years ago.
I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.
The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.
Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.
The *{} selector (Universal selectors) matches elements of any type. (MDN).
body,html{} select body and html elements.
Consider the following example:
* { /* Selects all elements */
color: blue;
}
html,
body { /* Selects html and body element */
color: green;
}
<html>
<body>Body</body>
<footer>footer</footer>
</html>
*{}
is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.
body,html{}
will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties
Is it possible to write a CSS rule to select the first child of an element without a specific class?
example:
<div>
<span class="common-class ignore"></span>
<span class="common-class ignore"></span>
<span class="common-class"></span>
<span class="common-class"></span>
</div>
In this case I would like to select the first span without class ignore.
I tried this, but didn't seem to work:
.common-class:first-child:not(.ignore) {
...some rules...
}
UPDATE:
If I add a class to the parent div named parent-class, a modified version of the selector suggested by Jukka works except when the first span with class ignore comes after the first one without. The above-mentioned selector is the following:
.parent-class > .common-class.ignore + .common-class:not(.ignore) {
...some rules...
}
This question is similar to CSS selector for first element with class, except for the first element without a class. As mentioned, :first-child:not(.ignore) represents an element that is the first child of its parent and does not have the class "ignore", not the first child matching the rest of the selector.
You can use the overriding technique with a sibling combinator that I've described in my answer to the linked question, replacing the class selector with the :not() pseudo-class containing a class selector:
.common-class:not(.ignore) {
/* Every span without class .ignore, including the first */
}
.common-class:not(.ignore) ~ .common-class:not(.ignore) {
/* Revert above declarations for every such element after the first */
}
This selects all span with a .common-class and without an .ignore class.
span.common-class:not(.ignore) {
color: blue;
}
But, because we want to select only the first one, you can override the siblings that follow with the ~ selector.
span.common-class:not(.ignore) ~ span {
color: black; /* or color: inherit; */
}
jsBin demo
If you are already using jQuery, this can also be done with
$("span.common-class:not(.ignore):first").css('color', 'blue');
No, it is not possible. The selector :first-child:not(.ignore) selects an element that is the first child of its parent and does not belong to class ignore. There is no “first of class” selector and no “first not of class” selector either.
You could use the selector .ignore + :not(.ignore), but it matches any element that is not in class ignore and immediately follows an element in that class. But it matches too much, not just the first one of such elements. Depending on the markup structure, this selector might still be suitable in a particular situation, even though it is not an answer to the general question asked.
You don't have to select the div using a class. What about other css solutions like nth-child etc.? Of course, this requires the knowledge of a document structure.
In my CSS, I have this:
b {
color: Red;
}
And in my body:
<b>Hello world!</b>
As a result, I get "Hello world!" text that is red in color.
However, as I add more classes:
.myClass {
color: Blue;
}
.green {
color: Green;
}
And I modify my body:
<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d
I will not get the same result as earlier.
Is there a way to strictly set a CSS style? Which means that with the above code I wish to get "Hello world!" text that is red.
Thanks
This is a question of CSS Specificicty
The concept: Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
Inline styles override external CSS, and class selectors override element level selectors.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors <--- your b CSS
Class selectors <---- your .xyz CSS
Attributes selectors
Pseudo-classes
ID selectors
Inline style <--- your style=''
If you wish to override specificity, you can use !important after the rule in question, e.g.:
b {
color: Red !important;
}
However, this is not recommended, instead you should write 'better' rules (more specific) to target your HTML as appropriate. This ensures you end up with better structured code, the issue with !important being it can lead to unforeseen circumstances where rules aren't working because you may have forgot you had previously overridden them.
Again, from MDN:
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
Some rules of thumb
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css (from ExtJs
or YUI for example). Never use !important when you're writing a
plugin/mashup. Always look for a way to use specificity before even
considering !important
With the markup that you provided, no. Otherwise, maybe
The inline style has priority over the stylesheet so part of the text will be black no matter what. You might be able to create a rule that has enough specificity that it will take precendence over any other rules.
b, b .myClass, b .green {
color: red;
}
Though this can get troublesome to maintain. And there is still a chance that a different css rule will get higher precedence later on. I am not completely sure that even specifying all the children with * will do it.
You seem to be asking whether you can set a property (color in the example) on an element in a manner that will not be overridden by settings on inner elements.
You cannot do that with settings on the element itself. But you can set a property on an element and all of its descendants:
b, b * {
color: Red !important;
}
This will override any normal settings for color on inner elements. But it is ineffective against, say, .green { color: Green !important; }. To defeat that, you would need a more specific selector, such as b .green, for your rule—so there is no general way to achieve that (i.e., a way that is independent of the specific markup used inside the element).
There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:
What the below CSS code means?
#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }
As per my understanding, please correct me if I am wrong:
Line 1: every li element within any element with id="nav" will have styling cssA
Line 2: When I put my cursor over every li element within any element with id="nav" will have styling cssB
Line 3: every a element within every li element within any element with id="nav" will have styling cssC
Line 4: When I hover every a element within every li element within any element with id="nav" will have styling cssD
Line 5: Every span element within every a element within every ul element within every li element within any element with id="nav" will have styling cssE. Also anyother ul or a element will not have this style untill unless the parent element has id="nav"
You are correct on all except .over, The "." represents a class. and "#" represents ID. But yeah, you've got the concept down.
Also, if you want to "Override" as the title says, you'll add
!important
to the end of any rules you want to take precedence over the others.
you can override the css by giving !important or you can give inline style.
priority of inline css is high then external css
All of the existing answers are correct, but there is a bit more to it than has been given already.
As has already been said, "li.over" is a combined selector - it will selector li elements that also have a class of "over". If you wanted to use different CSS properties or property values whilst the mouse is over (hovering over) the element then you use the pseudo class selector "li:hover". These are called pseudo class as you aren't selecting something that is part of the document, but based on the state of an element. There are also pseudo elements which again aren't in the document directly, but logical extensions of the document structure - for example first-child, first-of-type, fifth-of-type, odd items etc.
"#nav li ul a span" is a descendant selector, as you say it will select elements that are children (at any level) of each parent, so "#nav li" selects "li" elements contained within an item with ID "nav" - even several levels down.
If you want to select items that are direct children of the parent then you can use the ">" symbol. I.e. "#nav > li" will select li elements that are directly below any item with an ID of "nav", but not any li elements that are children of that element, or indeed elements below that.
Incidentally "#nav" is exactly equivalent to "*#nav" as it selects any element with the ID, you could also write "ul#nav" if you only wanted to select ul elements with the ID. This could in turn be combined with a class "ul#nav.bar" or even multiple classes "ul#nav.bar.touch".
Removing the space between the selectors like this combines them, so in the last case instead of looking for an item with class "touch" inside an item with class "bar" inside an item with ID "nav" inside a "ul" element, you are selecting a "ul" element with an ID of "nav" and both the classes "bar" and touch". An element like this-
<ul class="bar touch" id="nav">...</ul>
It is also possible to use attribute selectors, so if you wanted to select links which will open in a new window you could use "a[target=_blank]" - which selects based both on the presence of the attribute and the value - or if you wanted to select links with any href value you could use "a[href]". This simply selects all elements with this attribute.
On top of that you can even select items which are adjacent (next to) another element, if you wanted to select all paragraphs directly following an image then you would use "img + p" in your selector, or "p + img" if you wanted to select images directly following a paragraph. As always the last item in the selector is the one the styles are applied to.
It is generally considered good practice not to be overly specific with CSS selectors, as it makes your code much less re-usable. Unless you need to write "div.widget" just write ".widget" as the otherwise you'd not be able to create a "widget" using other elements, and it makes it much harder to override these properties later on in those cases you might need to.
To wrap up selectors, there's a good introduction to CSS selectors on MDN and Code School (paid course provider) also have a excellent online foundation course on CSS available for a very reasonable price which will go through selectors in some detail.
With regard to overriding classes, there are two further concepts you should understand - cascade order and specificity.
Given a HTML snippet of-
<div class="widget">
<p>
Some text you want to style
</p>
</div>
And the following CSS-
#widget p { color: yellow; }
p { color: blue; }
The color of the text would be yellow and not blue because the specificity of the first selector is greater (more specific) than the second. To understand this I suggest you have a play with a Specificity calculator and have a read of the Smashing Magazine tutorial on the subject.
In short though, inline styles trump all, and the more specific a selector the more likely it is to be applied in place of other selectors that would otherwise apply different property values. The value in the selector with the highest specificity score "wins", but other property values from selectors with lower specificity that do not clash will also still be applied to the element.
For example, altering our earlier CSS-
#widget p { color: yellow; }
p {
color: blue;
font-weight: bold;
}
The text will still be yellow, but will also be bold as there is no font-weight property given in the selector with higher specificity.
The last concept you should understand is what happens when two or more rules have identical specificity.
#widget p { color: yellow; }
#widget p {
color: blue;
font-weight: bold;
}
In this case our text is now blue as the second rule appears later in the stylesheet and thus overrides the first. If you have multiple stylesheets then the rules from the last stylesheet to appear in the document head will override rules with identical specificity.
In almost all cases you should use a more specific or the order of the selectors within the stylesheet in order to apply the right styles to the right element, and absolutely should not be routinely using the !important flag to achieve this unless absolutely necessary. See http://james.padolsey.com/usability/dont-use-important/ for a fuller explanation than I give here, but it rapidly becomes unmaintainable (what do you do when everything is "important") and it is also not accessible for users who may wish to override your styles in their user agent stylesheet (local to their browser) in order to help them read or use the page (increasing font size, contrast with background colour etc.)
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.