Skip to main content
CSS3

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

Positional Selectors

: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

Positional Selectors

: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

CSS3 Selectors Module

: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

HTML

: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) Selector

: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

HTML

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

 CSS

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-child(an+b) Selector

: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

nth-of-type(2) Selector

: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-child Selector

: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

only-of-type Selector

: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

Empty and Root Selector

 

Gourahari Patnaik

Gourahari Patnaik

Gourahari Patnaik works as Software Engineer with Trigent Software. He has 6+ years of experience as a UI Developer/Web Developer, building enterprise web applications. He has strong expertise in HTML5 and CSS3, Bootstrap Responsive Web technologies, JQuery and JavaScript. Gourahari also has experience in W3C Validation and Solving Browser and Device and Mobile compatibility issues along with experience in in SASS framework.