How can CSS Select Elements Specifically? The most important concept to understand is the parent to child relationship.

In any HTML5 document the elements have a hierarchy that functions like a parent to child relationship. For instance a ‘title’ element is a child element inside its parent element the ‘head’ element. The code snippet below contains a ‘div’ element inside the body element. The page also contains two ‘p’ elements one on line 10 and another on line 12.

CSS Select Elements Specifically.
Two paragraph elements.

The paragraph on line 10 is seen as a child element of the ‘div’ element as it is inside the opening and closing ‘div’ tags. The paragraph on line 12 is outside the ‘div’ element and is not therefore a child of the ‘div’ element.
This is useful to know for targeting a specific element with css. To change the colour of the paragraph inside the ‘div’ to red but leave the paragraph outside the ‘div’ as black requires a css rule that will only style a paragraph that is a child of a parent ‘div’ element.
In the ‘styles.css’ file a rule with is declared that does in fact target the paragraph inside a div.

CSS Select Elements Specifically.
The paragraph that is a child element of the ‘div’ element has been selected and given a colour of red.

The paragraph outside of the ‘div’ element has remained black. In the next example on line 4 a ‘p’ element is selected and given a color value of blue.

CSS Select Elements Specifically
The paragraph outside the ‘div’ element has changed to blue.

The first paragraph inside the ‘div’ remains red as it has been selected by the more specific ‘div > p’ selector. The second element is not a child of the ‘div’. By moving the ‘p’ element in the html5 document from outside the ‘div’ element to inside the ‘div’ element is will also become a child element to the ‘div’ element. This is the new html5 document with the paragraph moved from outside the ‘div’ to inside the ‘div’.

CSS Select Elements Specifically. Two paragraphs are red in colour.
Both paragraphs are child elements of the ‘div’ and are therefore changed to a red colour.

The ‘style.css’ file has remained unchanged.

The second rule on line 5 is overridden by the first style rule on line 1. This is because both paragraphs are child elements of the ‘div’ element. The style rule on line 1 specifically selects all the ‘p’ child elements of a ‘div’ element and applies a color value of ‘red’ to each.

Removing the css style rule on line 1 will cause both paragraphs to turn blue instead as they are selected by the ‘p’ selector.

CSS Select Elements Specifically.
Both paragraphs are selected and given the blue colour.

CSS Select Elements Specifically

CSS styles are applied according to a specificity calculation.

In another example only the first child element of a ‘div’ element is selected.

CSS Select Elements Specifically. First paragraph is red and second is blue.
Only the first child paragraph of the ‘div’ element is selected and given a color value of red.

Now lets swap that around so only the second paragraph inside the ‘div’ element will be selected and given a ‘red’ color value. On line 1 the ‘nth-of-type(2)’ pseudo class is added instead of the ‘first-of-type’ pseudo class. This rule will now select the second child paragraph inside a ‘div’ element.

CSS Select Elements Specifically. First paragraph is blue and the second paragraph is red.
The second child paragraph of a ‘div’ element has been selected and given a blue color value.

Back in the html5 document some a ‘div’ elements has been added and also some ‘p’ elements that are outside a ‘div’ element.

Also in the ‘styles.css’ file on line 5 the ‘div > p’ selector is added back.

CSS Select Elements Specifically. Paragraphs with text coloured red, blue and green.
CSS specificity calculations choose which style should be applied.

Here is a description of how each style rule is calculated with css specificity.

  1. The first paragraph is a child of a ‘div’ and therefore given the green color value from the ‘div > p‘ selector.
  2. The second paragraph is the second child of a ‘div’ and is therefore given the red color value from the ‘div > p:nth-of-type(2)‘ selector.
  3. The third paragraph is a child of a ‘div’ and therefore given the green color value from the ‘div > p‘ selector.
  4. The fourth paragraph is the second child of a ‘div’ and is therefore given the red color value from the ‘div > p:nth-of-type(2)‘ selector.
  5. The fifth and sixth paragraphs are both not children of a ‘div’ and are therefore given the blue color value from the ‘p‘ selector.

This is an introduction as to how css select elements specifically.


CSS3 logo. CSS Select Elements Specifically

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *