Does a “chained” selector have a higher specificity than a class or id selector? For example, which selector would “win”: .special or h1.special or #special?
Answer
A chained or qualified selector has a higher specificity than a class selector but a lower specificity than the id selector. Hence, assuming these selectors are all targeting the same HTML tag, the specificity from highest to lowest would be:
1) #special
2) h1.special
3) .special
It stated “if a p element also had a class of special the rule in the example would not style the paragraph element”. Why is this so and how to style p element then?
I am understanding how to style the paragraph but does the statement that i previously stated actually means that we cannot style two different elements(h2 and p) of same class(special)?
only h2 will be red, because h2.special selector rules mean: target all h2 element with class special. So h2 without class special are not affected by h2.special:
<h2 class="special">i am red</h2>
<h2>i am not</h2>
<p> class="special">me neither</p>
h2.special {color: red;}
¿Can you make a selector chainging two classes so that the css will only be apllied to an element that has both of the classes? For example, something like this:
CSS:
.note.italic {
font-color: red
}
So if we want to use this css and apply to an element, that element should have both classes (“note” and “italic”), otherwise, it won’t be apply.
Is there any way to make something similar to this? or you can only chain html elements with classes?
Literally, higher specificity means more details, vice-versa, lower specificity means less details.
As tag has a wide range of affecting elements in HTML so It’s ‘not specific’ to indicate certain part in HTML,
Yet ID has a narrower range of affecting elements in HTML so It is ‘very specific’ to indicate certain part in HTML.
In this manner, If we look at those 3 examples shown above, #sepcial, h1.special, .special.
.special - cover all the elements which have class .special
h1.special - cover all the elements which must contain h1 tag and class .special #special - cover very specific element with ID #special
Then the article says: “The code above would select ONLY the h1 elements that have a class of special . If a p element also had a class of special , the rule in the example would not style the paragraph.”.
ANSWER: The chaining rule above has excluded the style application to the p element by marriage of the special class to the heading h1 element. Although it has the special class, p is NOT a heading but a paragraph element, remember. Now, as I emboldened in the lesson quote above, you even see that there are TWO conditions to be met in this “chaining” rule case:
1 - Be a h1 AND
2. Have the class special .
That’s why it says "…the rule in the example would not style the paragraph.”…The heading h1 condition shut the door on the paragraph. In simpler words, the chain rule demands TWO conditions (1 & 2 above), only one of which is met by the paragraph element (condition 2).
It would work, although unnecessary to write that way. There can only be one #destination, and chaining it to a type selector will have no bearing on the specificity.
<h3 id="destination">An id is all that's needed</h3>
A class is not confined to a single instance, or any particular type so can be chained to all manner of type selectors.
h3.special
p.special
ul.special
Chaining a class to a type is far more utilitarian than chaining an id, which is ultra-specific.
If in our particular exercise Top Vacation Spots we wanted ALL headings with class="destination" to be cursive, then I think you’re probably right to suggest that it would be cleaner, tidier, and more logical to just use the class as the CSS selector (as to add an h2 would be redundant).
However, in our particular exercise this is not the case. We have both <h2> and <h4> elements with class="destination" and I think the idea is that we only want the <h2>s to be cursive. So, as both @mtf and @stetim94 have illustrated in their posts, we need to chain our CSS selector so that it only applies to:
If we substitute the <p> in @stetim94’s example with <h4> then this more closely mirrors what is going on with the headings in our particular exercise Top Vacation Spots (and obviously with cursive script rather than the colour red).
NB: The <h4> headings in our exercise are the destinations in the unordered list at the bottom of the page.