Which CSS Selector Is Stronger

Which CSS selector is stronger?

From the spec:

A selector's specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)
• ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Examples:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

Css selector for a strong

This should work:

.hrefspan a:hover, strong {
text-decoration: none;}

<span class="hrefspan"><a>...</a></span>

By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.

Which CSS selector is faster in performance? Class in Class vs tagName in Class?

I would expect .group .item to be (neglibibly) faster.

That's because, most probably, the number of div elements will be greater than the number of elements with class item.

So if you use .group div, every div will match the div part, and the browser will have to ensure there is a .group ancestor. If you use .group .item, every .item will match the .item part, and the browser will have to ensure there is a .group ancestor.

For better performance, you want to avoid false positives, and if a selector is not going to match an element, you want to reject it as soon as possible. So .group .item should be faster if there are less .item than div.

Anyways, use child selectors instead of descendant ones if you can. Seems reasonable for the formers to be faster.

Which CSS Selector is better practice?

We may assume that .product is unique throughout the page.

Performance-wise the best would of course have been an ID selector but since you're using a class instead, .product would come second.

As for maintainability, readability and semantics (there's a bit more on performance as well)...

1. .product means

   Find any elements that have a class product.

   Very easy to understand, almost identical to an ID selector if you use this based on the above assumption.

   I guess the only difference between using a class selector and an ID selector in this case is that an ID selector enforces uniqueness of this element, and not only because there just happens to be one such element. In other words, an ID selector acts on the knowledge that a document will only have one such unique element, while a class selector does not.

2. .main .category .product means

   Find any elements that have a class product
   which are contained in any elements that have a class category
   which are contained in any elements that have a class main.

   Browsers are tasked with checking the ancestry of these elements, which is redundant if you only have one .product. Many browser layout engines evaluate CSS selectors from right to left, similarly to how I translated the selector to English as above.

3. div.main div.category div.product means

   Find only <div> elements that have a class product
   which are contained in only <div> elements that have a class category
   which are contained in only <div> elements that have a class main.

   In addition with checking the hierarchy of elements, you expect a browser to only match a div with the class product. If you want to match any element of this class then this selector wouldn't work as intended.

   If you're sure you will only have exactly one div with that class, and you want to only match that element, then you could use div.product instead, but .product still performs fractionally better.

Why ID has stronger meaning than Class in CSS styling even if declared before the Class

This is to do with the complicated world of "Specificity"...

ID's are more specific than classes and take precedence over them. This is because ID's have to be UNIQUE on every page...so they are by nature very specific. Classes can appear multiple times.

Learning how this works is fundamental to coding CSS. Some people say you should try to avoid using ID's altogether as they are so specific they tend to cut down reuse.

A rule of thumb might be to use ID's to identify large sections of your page, or important items and classes to attach styles to the other things.

These days with html5 we have <section>, <header> and <footer> whereas we used to use div's for those (with ID's normally) so these days the ID is used less than ever since we can target those things directly.

However consider ID-ing sections: <section id="mainContent"> for example is a fairly standard thing to do.

There are no RULES about how to specifically (excuse the pun) use ID's and classes. Just conventions that have built up over time.

see: https://developer.mozilla.org/en/docs/Web/CSS/Specificity ... here is a section:

The concept

Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of different sorts of CSS selectors.

How is it calculated?

Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When specificity is equal to any of the multiple
declarations, the last declaration found in the CSS is applied to the
element. Specificity only applies when the same element is targeted by
multiple declarations. As per CSS rules, directly targeted element
will always take precedence over rules which an element inherits from
its ancestor.

Which of the following two selectors has a higher CSS specificity?

You can't hover over a ::first-letter, however, all things being equal, the first selector is stronger:

/* Selector 1 -> #object h2::first-letter */#this h2::first-letter{   color: red}
/* Selector 2 -> body .item div h2::first-letter:hover */body .item div h2::first-letter{   color: blue;}

<div class="item">  <div id="this">    <h2>This is a title</h2>  </div></div>

How does a strong selector override an id selector? Isn't an id selector considered more specific?

You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this

strong { color: red; }

#abc strong {  color: blue; } 

and if you wanted strong tags text to be the same as the p text then you would do this

#abc, #abc strong { color: red; }

strong { color: red; }#abc strong {  color: blue; }#def, #def strong { color: red; }

<p id="abc">  <strong>C</strong>ascading  <strong>S</strong>tyle  <strong>S</strong>heets</p><p id="def">  <strong>ABC</strong>DEF</p>

CSS - first-child selector stronger than class selector

It's not that it's stronger, but targeting the parent and then the LI is more specific, so you have to be just as specific when adding a new class

.start li.change

FIDDLE

How to create css classes which are stronger that elements?

This is about specificity. form input[type=submit] is more specific, so will override a class. If you use an id on your element it will be more specific still, and so will override your general rule.

form #submitButton {
    /* strongly specific rules */
}

---

Related Topics