CSS3 Selectors Module Part-3

This is the last blog in my tri-series on CSS3 Selectors Module. Please click on the link to read CSS3 Module Part – 1 and CSS3 Module Part 2.

Positional Selectors

:first-child – Selects every <p> element that is the first child of its parent

first-child Selector Example:

HTML

<p>This content is the first child of its parent (body).</p>
 <h4>Welcome to CSS3 Selectors Module</h4>
 <p>This content is not the first child of its parent.</p>
 <div class="targetAttr">
 <p>This content is the first child of its parent (div).</p>
 <p>This content is not the first child of its parent.</p>
 </div>

 CSS

.targetAttr {
 border-radius: 7px;
 border: 2px solid #f2f2f2;
 padding: 0px 10px;
 width:300px;
 margin:0px 0px;
 background:none;
 }
 p:first-child {background-color:yellow;}

 OUTPUT

:first-of-type – Selects every <p> element that is the first <p> element of its parent

first-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>

 CSS

p:first-of-type {background:yellow;}

 OUTPUT

:last-child – Selects every <p> element that is the last child of its parent

 last-child Selector Example:

HTML

<p>This content is the first child of its parent.</p>
 <h1>Welcome to CSS3 Selectors Module</h1>
 <p>This content is not the last child of its parent.</p>
 <div class="targetAttr">
 <p>This content is not the last child of its parent.</p>
 <p>This content is the last child of its parent (div).</p>
 </div>
 <p>This content is the last child of its parent (body).</p>

 CSS

p:last-child {background:yellow;}

 OUTPUT

:last-of-type – Selects every <p> element that is the last <p> element of its parent

last-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

 a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <div class="targetAttr">
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 </div>
 <h4>N is a counter and starts at 1</h4>
 <p>Selects every &lt;p&gt; element that is the second child of its parent</p>

 CSS

p:nth-child(2) {background:yellow;}

 OUTPUT

a keyword: Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Odd and Even Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <h3>Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).</h3>

 CSS

p:nth-child(odd){background:yellow;}
 p:nth-child(even){background:cyan; color:white;}

 OUTPUT

a formula: Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

nth-child(an+b) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <p>The seventh paragraph.</p>
 <p>The eight paragraph.</p>
 <p>The ninth paragraph.</p>

 CSS

p:nth-child(3n+3){background:Yellow;}

 OUTPUT

:nth-of-type(n) – Selects every <p> element that is the second <p> element of its parent

nth-of-type(2) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>

 CSS

p:nth-of-type(2){background:Yellow;}

 OUTPUT

:only-child – Selects every <p> element that is the only child of its parent

only-child Selector Example:

HTML

<div><p>This is a first content.</p></div>
 <div><p>This is a paragraph.</p></div>
 <div><span>This is a span.</span><p>This is a paragraph.</p></div>

 CSS

p:only-child{background:Yellow;}

 OUTPUT

:only-of-type – Selects every <p> element that is the only <p> element of its parent

only-of-type Selector Example:

HTML

<div><p>This is a paragraph 1.</p></div>
 <div><p>This is a paragraph 2.</p><p>This is a paragraph 3.</p></div>
 <div>The :only-of-type selector matches every element that is the only child of its type, of its parent.</div>

 CSS

p:only-of-type{background:Yellow;}

 OUTPUT

:empty – Selects every <p> element that has no children (including text nodes) & :root – Selects the document’s root element

Empty and Root Selector Example:

HTML

<h4>The :empty selector matches every element that has no children (including text nodes).</h4>
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p></p>
 <p>The fourth paragraph.</p>

 CSS

p:empty{width:100px; height:20px; background:red;}
 :root{background:light-dark;}

 OUTPUT