Which css dominates

Posted on by
Reply

In my previous post I explained how css selection works. However what happens when a property of an element is defined multiple times? Which one will be used?

Take for example the following html:

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Line of text</p>
    <p>Another line of text</p>
    <div class="special">
      <p>Special line of text</p>
    </div>
  </body>
</html>

If we have the following css line:

p { color: red; }

The color of all p elements will be red

If we have the following css lines:

div.special p { color: blue; }
p { color: red; }

The p inside the div with class “special” will be blue while the other p elements will still be red. This is because “div.special p” is more specific then the “normal” p selector.

If we have the following css lines:

p { color: red; }
p { color: blue; }

The color of all p elements will be blue. This is because the blue value is more recent then the red value. Take this into account when loading multiple css files, the more recent will dominate is both are equally specific.

If we have the following css lines:

p { color: red !important; }
p { color: blue; }

The color of all p elements will be red. Even though the blue property is more recent and they are equally specific. This is because the first one is marked with important. Important overrules any later changes to the specified property. This is a way to make sure a earlier property is applied in stead of a later one. This can be useful is different style sheets are loaded after your own.

With inline style, no css (except for css marked with Important) can overrule the style. This can only be overruled using JavaScript.
Inline style example:

<p style="color: orange;">This is always orange<p>

This can be overruled using the following jQuery line:

$("p").css("color","blue");

Which will add inline style to all p elements with blue as color property.

In short this is what decides which css style will dominate:

  1. Important suffix
  2.  Specific
    1. Inline
    2. Id
    3. Class
    4. Element
  3. Most recent

Most recent will dominate if none of the others apply. More specific css will dominate over less specific css. With important this will overrule all non-important css, between multiple important css parts the most specific will eventually be dominant. The only css that cannot be overrules with css alone is inline style with the important tag applied; the only way to overrule that is by replacing is with a piece of JavaScript.

CSS element selection

Posted on by
2

Most of the time when applying stylesheets it is not the toughest to create the right style, it often is more difficult to apply the style to the right area, and the right area only!
That’s why in this post I want to elaborate on the css selection syntax (this is the same used with jQuery also).
With examples of html and css I want to illustrate different ways to select the right element inside css (or jQuery).
First of lets start with the basics:
To select all of the same element you can simply use the name of the element. With this example all paragraphs (p) get a black color.

p { color: black; }

Links (a) are special is the way that they can have different states.

a:link { color: blue; }
a:hover { color: red; }
a:active { color: orange; }
a:visited { color: purple; }

How about selecting only links within paragraphs and giving them a different font-weight?

p a { font-weight: bold; }

“p a” means: all “a” elements who are inside a “p” element

<a>not bold</a>
<p><a>bold</a> not bold</p>

With this html and the previous css the first a would have a normal font-weight, the second however would be bold.
When a certain style applies to multiple elements you can use a comma to seperate several elements

p, a { background-color: yellow; }

In this example all “p” elements and “a” elements will have a yellow background.
It is also possible to combine different of the above methods:

p, a:active, p a {color: red; }

This means that all “p” elements, all “a” elements with status “active” and all “a” elements inside “p” elements have a red color.
This already provides a lot of possibilities to style a page. However this will mostly not be enough, you are bound to have different types of paragraphs or links. For this there are classes and ID’s to give to elements.
General rule is that an ID must be unique, which means that on every page not double ID’s are present. If multiple elements need the same style it is better to use classes.
In HTML and ID looks like this:

<p id="special">special text</p>

In css this element can be reached in one of the following ways:

#special {font-size: 110%; }
p#special {font-size: 110%; }

The first line means that all elements with ID “special” get a font-size of 110%. The second line means all paragraphs with ID “special” get a font-size of 110%.
In HTML a class looks like this:

<p class="underline">underlined text</p>

In css this element can be reached in on of the following ways:

.underline {text-decoration: underline;}
p.underline {text-decoration: underline; }

The first line means that all elements with class “underline” get an underline. the second line means that only paragraphs with class “underline” get an underline.
In my next post about CSS I will elaborate in what happens it one element is selected in multiple ways and which CSS style will be dominant.