Understanding CSS specificity will help you understand how rules are applied to the elements on your page and allow you greater control over how your page is styled.

Contents

1. Getting Specific
2. Calculating Specificity
3. Rules for Creating Specific Selectors
4. Final Words
5. References

Getting Specific

You’ve seen that you can apply multiple styles to an HTML element like this:

<p id="first" class="important box">

And you can create individual styles for various elements on the page:

p {
  background-color: aliceblue;
}

#first {
  background-color: darkgray;
  color: yellow;
}

.important {
  font-size: 24px;
  background-color: red;
  color: black;
  border: 2px solid black;
}

.box {
  border: 1px solid black;
}

A number of rules style the same CSS properties – background-color and color – and final result depends on:

1. the priority (or significance) of the selectors
2. for selectors with the same priority, the last defined property takes priority.

Which means that the final style rule looks like this

{
  /* ID styles have highest priority */
  background-color: darkgray;
  color: yellow;
  /* font-size is only specified in .important,
     so it is applied */
  font-size: 24px;
  /* border in .box is defined after border was
     defined in .important, so it gets applied */
  border: 1px solid black;
}

This can seem haphazard and you might like to have better control over your CSS style rules – especially if later declarations can override earlier declarations.

We can overcome this by being more specific with our styling rules:

/*
  Apply this style to any element which has
  id="first" AND class="important"
*/
#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

We can get even more specific with the following:

/*
  Apply this style to any <p> element which has
  id="first" AND class="important"
*/
p#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

However, if you created the following rule:

/*
  Apply this style to any <p> element which has
  a class="important"
*/
p.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

And you applied it to the following code:

<p id="first" class="important box">

You would find that the styles of #first would take priority over the styles in p.important despite p.important appearing to be more specific – after all, it specifies two selectors (<element> and .class) over the single ID selector.

This is because the significance of a rule depends on the specificity of the selector. CSS specificity is calculated using a few straightforward rules.

Calculating Specificity

Specificity is calculated as a string of three values¹. Many resources and tutorials show it as a single number like 000 or 130. Some tutorials show it in the form 0-0-0 or 1-3-0 – which is a better representation. I will use the following representation: 0:0:0 or 1:3:0.

The specificity number indicates the total counts of various basic selectors. The universal selector always has a specificity of 0:0:0 – so any selector with a higher specificity will trump it. As with normal numbers, the leftmost digits are more significant than the rightmost digits. Consider the ranking of the following specificities:

• 0:0:1 > 0:0:0
• 0:2:0 > 0:1:0
• 0:2:1 > 0:1:6
• 0:2:5 > 0:2:4
• 1:2:3 > 0:12:7

The specificity number is calculated as the total number of CSS specifiers used for that style rule. The totals are arranged in the following manner:

Consider the specificity of the following selectors:

* {
  /* specificity = 0:0:0 */  
}

p {
  /* specificity = 0:0:1 */  
}

.class {
  /* specificity = 0:1:0 */  
}

[attribute] {
  /* specificity = 0:1:0 */    
}

#id {
  /* specificity = 1:0:0 */  
}

p.class {
  /* specificity = 0:1:1 */
}

ol[reversed] {
  /* specificity = 0:1:1 */
}

p#id.class {
  /* specificity = 1:1:1 */
}

p#id.class[attribute] {
  /* specificity = 1:2:1 */
}

#id[attribute] {
  /* specificity = 1:1:0 */
}

.class[attribute] {
  /* specificity = 0:2:0 */
}

/*
  it looks strange, but this is valid CSS
  you can repeat the same selector over and
  over to increase its specificity.

  It does not work for <elements>, i.e. you
  can not do ppp to increase the specificity
  for <p> tags.
*/
.class.class.class.class {
  /* specificity = 0:4:0 */
}

In each case, you simply add up the total number of basic selectors, put them in the correct location and compare.

Rules for Creating Specific Selectors

1. If you specify an HTML element, then it must be at the beginning of the selector. i.e.: p[attribute] not [attribute]p.
2. There can be a maximum of 1 HTML element in a specific selector. i.e.: p.class or ul[reversed], but not pspan.class.
3. There can be a maximum of 1 #ID in a selector. This is because an element can have at most 1 #ID.
4. The order of .class, [attribute], or #ID doesn’t matter. i.e.: #ID.class is equivalent to .class#ID.
5. .class, [attribute], and #ID selectors may be repeated to increase their specificity. i.e.: .class has a specificity of 0:1:0, but .class.class has a specificity of 0:2:0.
6. You cannot repeat HTML elements. i.e.: pppp or ulul have no meaning and will be ignored by the browser.
7. All selectors are written together without spaces between them. i.e.: p.class is not the same as p .class and #id[attribute] is not the same as #id [attribute].²

Final Words

1. You can be very specific about which HTML element to style on a page by stringing together various selectors associated with that element:

   /*
     select <ul> elements which contain the
     reversed attribute
   
     specificity = 0:1:1
   */
   ul[reversed] {
   
   }
   
   /*
     select <ul> elements which contain the
     reversed attribute AND have a class of
     .class1
   
     specificity = 0:2:1
   */
   ul[reversed].class1 {
   
   }

2. Specificity is calculated by summing and arranging the total number of basic specifiers in each of the following groups:
   

   IDs

   .classes and [attributes]

   <elements>

3. In deciding which styling rule to apply, the rule with the higher specificity is applied.
4. If two rules have the same specificity then the last rule defined is applied.
5. The universal selector always has a specificity of 0:0:0.

6. There are no spaces between the selectors – it is written as one long expression.

References

1. CSS Selectors

The post CSS Specificity – Advanced CSS Selectors – Part 2 appeared first on Complete, Concrete, Concise.

Contents

1. Alternating Paragraph Colours
2. Selectively Styling Ordered Lists
3. Selectively Styling Anchors
4. Experiments with Multiple Classes
5. Selecting with ID, Class, and Attribute

Alternating Paragraph Colours

You can see how my attempt looks here

<!DOCTYPE HTML>
<html>
  <head>
    <title>Alternating Paragraph Colours</title>
    <style>

      body {
        background-color: cornsilk;
      }

      .bar1 {
        background-color: white;
      }

      .bar2 {
        background-color: #f0fff7;
      }

    </style>
  </head>
  <body>
    <h1>Alternating Paragraph Colours</h1>
    <p class="bar1">Fac ergo, mi Lucili, quod
    aequitatem tuam decet, desine beneficium fortunae
    male interpretari: abstulit, sed dedit</p>

    <p class="bar2">Ideo amicis avide fruamur quia
    quamdiu contingere hoc possit incertum est.
    Cogitemus quam saepe illos reliquerimus in aliquam
    peregrinationem longinquam exituri, quam saepe
    eodem morantes loco non viderimus: intellegemus
    plus nos temporis in vivis perdidisse.</p>

    <p class="bar1">Feras autem hos qui
    neglegentissime amicos habent, miserrime lugent,
    nec amant quemquam nisi perdiderunt? ideoque
    tunc effusius maerent quia verentur ne dubium
    sit an amaverint; sera indicia affectus sui
    quaerunt.</p>

    <p class="bar2">Si habemus alios amicos, male de
    iiset meremur et existimamus, qui parum valent in
    unius elati solacium; si non habemus, maiorem
    iniuriam ipsi nobis fecimus quam a fortuna
    accepimus: illa unum abstulit, nos quemcumque non
    fecimus.</p>

    <p class="bar1">Deinde ne unum quidem nimis
    amavit qui plus quam unum amare non potuit. Si
    quis despoliatus amissa unica tunica complorare
    se malit quam circumspicere quomodo frigus
    effugiat et aliquid inveniat quo tegat scapulas,
    nonne tibi videatur stultissimus? Quem amabas
    extulisti: quaere quem ames. Satius est amicum
    reparare quam flere.</p>

    <p class="bar2">Scio pertritum iam hoc esse quod
    adiecturus sum, non ideo tamen praetermittam
    quia ab omnibus dictum est: finem dolendi
    etiam qui consilio non fecerat tempore invenit.
    Turpissimum autem est in homine prudente
    remedium maeroris lassitudo maerendi: malo
    relinquas dolorem quam ab illo relinquaris;
    et quam primum id facere desiste quod, etiam
    si voles, diu facere non poteris.</p>

    <p class="bar1">Annum feminis ad lugendum
    constituere maiores, non ut tam diu lugerent,
    sed ne diutius: viris nullum legitimum tempus
    est, quia nullum honestum. Quam tamen mihi ex
    illis mulierculis dabis vix retractis a rogo,
    vix a cadavere revulsis, cui lacrimae in totum
    mensem duraverint? Nulla res citius in odium
    venit quam dolor, qui recens consolatorem
    invenit et aliquos ad se adducit, inveteratus
    vero deridetur, nec immerito; aut enim
    simulatus aut stultus est.</p>

    <p class="bar2">Haec tibi scribo, is qui Annaeum
    Serenum carissimum mihi tam immodice flevi ut,
    quod minime velim, inter exempla sim eorum quos
    dolor vicit. Hodie tamen factum meum damno et
    intellego maximam mihi causam sic lugendi
    fuisse quod numquam cogitaveram mori eum ante
    me posse. Hoc unum mihi occurrebat, minorem
    esse et multo minorem - tamquam ordinem fata
    servarent!</p>
  </body>
</html>

Notes

1. a style was applied to the body to give it a background colour;
2. two classes (called bar1 and bar2) were created to style the paragraphs;
3. the classes were alternately applied to the paragraphs.¹

As a reminder, you have previously seen that HTML collapses any extra white space between text, so breaking the paragraph content over several lines (so it comfortably fits on the page) doesn’t affect the way it appears when rendered.

Selectively Styling Ordered Lists

You can see how my attempt looks here

<!DOCTYPE HTML>
<html>
  <head>
    <title>Selectively Styling Lists</title>
    <meta charset="utf-8" />

    <style>

      body {
        background-color: aliceblue;
      }

      li {
        margin: 16px;
      }

      [reversed] {
        background: lime;
      }

    </style>

  </head>
  <body>
    <h1>Selectively Styling Lists</h1>

    <h2>Top 5 Reasons to Learn HTML & CSS</h2>
    <ol>
      <li>It's fun!</li>
      <li>To be cool!</li>
      <li>Create your own webpages.</li>
      <li>Have a hobby.</li>
      <li>Indulge your curiosity.</li>
    </ol>

    <h2>Counting Down 5 Reasons to Learn HTML & CSS</h2>
    <ol reversed>
      <li>It's fun!</li>
      <li>To be cool!</li>
      <li>Create your own webpages.</li>
      <li>Have a hobby.</li>
      <li>Indulge your curiosity.</li>
    </ol>
  </body>
</html>

Notes

1. a style was applied to the body to give it a background colour;
2. a style was applied to the list items to space them out a bit more
3. reverse ordered lists are selected for styling using an attribute selector. (It is also acceptable to style the reverse ordered list using a class.)

Selectively Styling Anchors

You can see how my attempt looks here

<!DOCTYPE HTML>
<html>
  <head>
    <title>Selectively Styling Anchors</title>
    <meta charset="utf-8" />

    <style>

      body {
        background-color: #FDF9FF;
      }

      li {
        margin: 24px;
      }

      [target] {
        padding: 7px;
        border: blue 3px solid;
        background: lightblue;
      }

      [download] {
        padding: 5px;
        background: yellow;
      }

    </style>
  </head>
  <body>
    <h1>Selectively Styling Anchors</h1>
    <p>You can choose to:</p>

    <ul>
      <li>View the
        <a href="/sample/18-styling-anchors.txt">
          source code.
        </a>
      </li>
      <li>View the
        <a href="/sample/18-styling-anchors.txt"
           target="_blank">source code</a>
        in a new tab.
      </li>
      <li>Download the
        <a href="/sample/18-styling-anchors.html"
          download>source code.</a>
      </li>
    </ul>
  </body>
</html>

Notes

1. a style was applied to the body to give it a background colour;
2. the anchors were structured using an unordered list. There is no requirement to do this. I did it because it gave a bit of structure.
3. the list items were given a bit more margin. This was done after styling the links and deciding I needed more space.
4. the anchor tags were selected and styled based on their attributes. You could have applied a class to each anchor as well. But I think using the attribute is better since that information is already part of the anchor. If you use a class, you need to add additional information to the tag.
5. you will notice the source code for the first two points to a .txt file instead of an HTML file. This is because a browser will attempt to render HTML files as HTML (i.e. it will display it as an HTML page, not source code).
6. I use relative links rather than a full URL. Obviously, whatever links you use will need to be appropriate for your environment.

Experiments with Multiple Classes

You can see how my attempt looks here

<!DOCTYPE HTML>
<html>
  <head>
    <title>Multiple Class Interaction</title>
    <meta charset="utf-8" />

    <style>

      body {
        background-color: #FFF9F4;
      }

      .class-1 {
        background-color: yellow;
        color: red;
      }

      .class-2 {
        background-color: silver;
      }

      .class-3 {
        background-color: lightgreen;
      }

    </style>
  </head>
  <body>
    <h1>Multiple Class Interaction</h1>
    <p class="class-1 class-2">
      This paragraph is styled with class-1 and class-2.
    </p>
    <p class="class-2 class-1">
      This pragraph is styled with class-2 and class-1.
    </p>
    <p class="class-1 class-3">
      This paragraph is styled with class-1 and class-3.
    </p>
    <p class="class-3 class-1">
      This paragraph is styled with class-3 and class-1.
    </p>
    <p class="class-2 class-3">
      This paragraph is styled with class-2 and class-3.
    </p>
    <p class="class-3 class-2">
      This paragraph is styled with class-3 and class-2.
    </p>
  </body>
</html>

Notes

1. a style was applied to the body to give it a background colour;
2. 3 simple classes were defined. All of them define a different background colour;
3. the classes were mixed and matched on various paragraph elements;
4. the order of application of classes to an element doesn’t matter – i.e., class-1 class-2 gives the same result as class-2 class-1;
5. the order in which the classes are defined does matter. If you move the definition of class-1 after class-3, you will notice that the applied styles change. This is the cascading aspect of CSS. In general, the most recently seen attribute value is the one that is applied. It is a bit more complicated than that. We will explore this more in a future tutorial.

Selecting with ID, Class, and Attribute

You’ve seen that you can apply multiple styles to an element by using multiple classes. You can also apply multiple styles by using a variety of selectors.
You can see how my attempt looks here

<!DOCTYPE HTML>
<html>
  <head>
    <title>Multiple Attribute Styling</title>
    <meta charset="utf-8" />

    <style>

      body {
        background-color: ##F0FFFF;
      }

      .class {
        color: red;
      }

      #id {
        background-color: yellow;
      }

      [target] {
        border: 2px solid black;
      }

      a {
        margin: 50px;
        padding: 10px;
      }

    </style>
  </head>
  <body>
    <h1>Multiple Attribute Styling</h1>
    <p>Any styling selectors you define are applied
      to any and all elements that match the selector.
      So you can have multiple styles applied by
      multiple different selectors.
    </p>
    <p>The following element receives 4 different
      styles applied by 4 different selectors:
    </p>
    <a id="id" class="class"
       href="http://example.com" target=_blank>
      I wonder where this link goes?
    </a>
  </body>
</html>

Notes

1. a style was applied to the body to give it a background colour;
2. 4 different styles are defined. Each style uses a different selector;
3. all of the styles combine on the anchor tag
4. while classes are the main way to define styles, remember that there are other selectors as well. In a future, tutorial we will explore how the different styles combine when they overlap – i.e., two or more selectors style the same property differently.

The post Five Examples Using CSS Selectors appeared first on Complete, Concrete, Concise.

So far, we have seen a few CSS style properties and how they can be applied to HTML elements. However, this way of styling affects all the HTML elements, it would be useful to selectively style certain p tags rather than all of them.

Contents

1. CSS Selectors
   1. Type Selector
   2. ID Selector
   3. Class Selector
   4. Universal Selector
   5. Attribute Selector
2. Conclusion
3. Playing Around
4. References

CSS Selectors

We’ve seen that CSS Styling has the following format:

selector {
  property-1: value;
  property-2: value;
  ...
  property-n: value;
}

The only selector we used was the HTML element type (p, h1, etc). There are five different types of selectors.
You can apply the same style to multiple selectors by listing them and separating them with commas:

selector-1, selector-2, ..., selector-n
{
  property-1: value;
  property-2: value;
  ...
  property-n: value;
}

This is commonly used to set default styles for various elements. For example, perhaps you want all heading items to have the same appearance, you could do it like this:

h1, h2, h3, h4, h5, h6 {
  color: blue;
  background-color:cornsilk;
}

Type Selector

This is the one you have already seen – the unadorned HTML element type:

h1, h2 {
  background-color: red;
}

ID Selector

We have seen that all HTML elements can have attributes. One attribute they can have is the id attribute – it is often used as a link reference for the a tag. The id is accessed by prefacing its value with the pound sign (#):

<h2 id="contents">Contents</h2>
...
<a href="#contents">Return to Contents</a>

You can use this id as a CSS Selector as well:

#contents {
  color: white;
  background-color: black;
}

The above code snippet will select the HTML element which has an id value of contents.
As a reminder, every id in a document must be unique.¹

Class Selector

HTML tags can have another attribute called class. Classes do not have to be unique in the document. Several HTML elements can use the same class:

<p class="important">This is an important paragraph.</p>

The class definition is very similar to the id definition. The value should be composed of letters, digits, underscores, or hyphens. No spaces or other characters. It should begin with a letter or underscore, not a digit or hyphen.
To access a class and use it for styling, you need to preface the class name with a period (.):

.important {
  background-color: yellow;
}

The above code snippet will set to yellow the background colour of all HTML elements with the class of important.
You can apply multiple classes to the same HTML element by listing them and separating them with a space:²

<p class="c1 c2 c3">This is a sample paragraph.</p>

In the code snippet above, the classes c1, c2, and c3 will be applied to the paragraph. Consider the following class style definitions:

.c1 {
  color: blue;
}

.c2 {
  background-color: yellow;
}

.c3 {
  border: 2px black solid;
}

Applying the above classes to the HTML fragment above results in:

This is a sample paragraph.

It should be obvious that you should try to select meaningful names for your classes (just as you should for ids).
Your class names should reflect the purpose of the class, not its behaviour (there are always exceptions). For example, instead of calling a class red-bg, it might be better to call it alert or warning. Or instead of calling a class background it might be better to call it article-bg or header-bg.
I can’t stress enough how important it is to properly structure your HTML documents.
Having said that, you will probably never get it 100% right, but that doesn’t mean you shouldn’t try to get it as right as possible. A good trick is to imagine that in the future the document needs to be completely restyled. If you can simply change the styling in the class without having to change the class name, then you probably got it right. Consider the red-bg class in the previous paragraph – if you change it to blue then the class name no longer makes any sense. However, had it been warning, you can change the background colour all you want and it doesn’t affect the class name.

Universal Selector

Sometimes, you want to apply a particular style to all the elements on the page. This can be done using the universal selector:

* {
  margin: 5px;
}

The above code snippet will set the margin to 5 pixels for every single element in the document.
It is very powerful tends to be used different ways:

1. To change the default behaviour of everything in the document. We’ll see an example of this in a future tutorial when we change the behaviour of the CSS Box Model.
2. It is also useful for certain selection behaviour. This tutorial only covers basic selection. Future tutorials will explore more advanced selection.³

Attribute Selector

You can select HTML elements based on their attributes. The attribute name is enclosed in square brackets ([])

[reversed] {
  background-color: gray;
}

The above code snippet selects all HTML elements with the reversed attribute. It only tests if the attribute has been specified for the element, it doesn’t care about the value of the attribute.
You can also test for specific attribute values:

[start="10"] {
  background-color: yellow;
}

The above code snippet selects all HTML elements with a start attribute having the value of 10. Values must be enclosed in quotes (single or double quotes). The value must exactly match.
Instead of using class or id selectors, you could use attribute selectors for class or id. Consider the following:
Consider the following:

<style>
  [class="bob"] {
    color: blue;
  }

  [class="mary"] {
    background-color: yellow;
  }

  [class="bob mary"] {
    color: green;
    background-color: red;
  }

  [class="mary bob"] {
    color: red;
    background-color: green;
  }
</style>

<p class="bob">This is Bob.</p>
<p class="mary">This is Mary.</p>
<p class="bob mary">This is Bob and Mary.</p>
<p class="mary bob">This is Mary and Bob.</p>

}

The code snippet above is a non-standard way of styling using classes or ids – but it can be done (remember, just because something can be done, doesn’t mean it should be done). You have to exactly match the class value to style it. Had you styled the classes instead, then the styles combine and build one atop the other.
There are more ways to select using attributes, but we’ll cover those in a future tutorial.

Conclusion

1. There are 5 different ways to select HTML elements for styling:
   1. Type
   2. ID
   3. Class
   4. * (universal)
   5. Attribute
2. Type Selection uses the name of the HTML element type. E.g:

   h1 {
     color: red;
   }

3. ID Selection uses the ID attribute of the HTML element. The id is prefaced with the pound sign (#). An HTML element can have only one id and the id must be unique in the document. E.g.:

   #table-of-contents {
     color: blue;
   }

4. Class Selection uses the class attribute of the HTML element. The class name is prefaced with a period (.). Classes do not need to be unique in a document. You can apply several classes to an HTML element. E.g.:

   .notification {
     color: yellow;
     background-color: blue;
   }

5. Universal Selection selects all HTML elements. E.g.:

   * {
     color: red;
   }

6. Attribute Selection selects all elements matching the specified attribute. E.g.:

   [reversed] {
     color: black;
     background-color: white;
   }

7. Most commonly, you will use classes for styling HTML elements.
8. Choose good class names. In general, they should indicate the function of purpose of the styling, not its effect.

Playing Around

The best way to learn is to play around with what you have learned.
Some webpage ideas:

1. Create a webpage with alternately styled paragraphs using classes:

   This is one paragraph.

   This is another.

   This is the third paragraph.

   After this, there is no other.

2. Style ordered lists differently depending on whether or not the reverse attribute is set. Refresh your knowledge of the reverse attribute.
3. Style hyperlinks differently depending on whether they open in the current tab, a new tab or initiate a download. Refresh your knowledge of hyperlink attributes.
4. Try applying multiple classes to an element. What happens if two classes style the same property with different values?⁴ Does the order of the classes change anything?

Use the CSS properties you have learned so far and try multiple (and conflicting) combinations:

• color
• background-color
• border
• padding
• margin

In the next tutorial, we will expand our vocabulary of CSS styling properties.

References

1. Type Selector
2. ID Selector
3. Class Selector
4. Universal Selector
5. Attribute Selector

The post CSS – Selecting Specific Elements for Styling appeared first on Complete, Concrete, Concise.