Selectors in CSS 3

Loading

Selectors in CSS 3

Introduction

This article is about CSS selectors and how they work. The following is an explanation of most of the selectors used in CSS.

In the following, first is a CSS example and then the corresponding HTML code on which it will work, so to try it yourself create an HTML page and put the CSS as well as the related HTML in it and see the results. In most of the selects I provided a demo link where you can visit and see the results.

In the following article, you might find a new CSS selector that is part of the new CSS3. All of the following examples and demos have been tried by me on the latest Chrome version.

.Class

Selects all the elements with the given class name.

CSS

.MyIntro
{
font:15px arial,sans-serif;
color:red;
}

Use

<div class="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

#id

Selects all the elements with the given id name.

CSS

#MyIntro
{
font:15px arial,sans-serif;
color:red;
}

Use

<div id="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

Point to note: You can have more than one element having the same classname in the HTML page but you can have only one element with the ID.

HTMLElement

Selects all the HTML elements that the name is given.

CSS

P
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

HtmlElement HtmlElemnt

Selects all the HTML elements that are in a HTML element.

CSS

div p
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
<p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

In this example all p elements inside a div are highlighted with the red color, but the p element outside the div isn't affected.

HtmlElement > HtmlElemnt

Selects all the HTML elements that are children of the HTML element.

CSS

div > p
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
<p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

In this example all p elements that are children of a div are highlighted with the red color, but the p elements that are not children of the div isn't affected.

HtmlElement + HtmlElemnt

Selects all the HTML elements that are immediately after an HTML element.

CSS

div + p
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>

In this example a p element that is immediately after a div is highlighted with the red color, in this example the text "I am working as Soft Engg." is highlighted.

HtmlElement ~ HtmlElemnt

Selects all the HTML elements that precede a HTML element.

CSS

div ~ p
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>

In this example the p element that precedes a div is highlighted with the red color, in this example the text "I am working as Soft Engg." and "My Demo Page." is highlighted.

[attribute]

Selects all the HTML elements that have an attribute.

CSS

[data-name]
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

In this example any element that has the attribute "data-name"div is highlighted with the red color, in this example the text "My name is Pranay Rana." and "My Demo Page." is highlighted.

[attribute = data]

Selects all the HTML elements with an attribute value equal to data.

CSS

[data-name = 'demo']
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

In this example any element that has the attribute "data-name" and the value = "demo" is highlighted with the red color, in this example the text "My Demo Page." is highlighted.

[attribute ^= data]

Selects all the HTML elements where the attribute value begins with data.

CSS

[data-name ^= 'pra']
{
font:15px arial,sans-serif;
color:red;
}

So with the preceding HTML when applying this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value begins with "pra".

[attribute $= data]

Selects all the HTML elements where the attribute value ends with data.

CSS

[data-name ^= 'pra']
{
font:15px arial,sans-serif;
color:red;
}

So with the preceding HTML when applying this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value ends with "nay".

[attribute *= data]

Selects all the HTML elements where an attribute value contains data.

CSS

[data-name *= 'rana']
{
font:15px arial,sans-serif;
color:red;
}

So with the preceding HTML when apply this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value contains "rana".

[attribute ~= data]

Selects all the HTML elements where an attribute value contains word data.

CSS

[data-name ~= 'page']
{
font:15px arial,sans-serif;
color:red;
}

Use

<div >
<p data-name="pranay_page">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo page">My Demo Page.</p>

In this example any element where an attribute "data-name" value contains word = "page" is highlighted with the red color, in this example the text "My Demo Page." is highlighted.

:first-child

Select the first element (first child) of a parent.

CSS

li:first-child
{
font:15px arial,sans-serif;
color:red;
}

Use

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

In this example the "item1" element is highlighted with the red color.

:last-child

Select the last element (last-child) of a parent.

CSS

li:last-child
{
font:15px arial,sans-serif;
color:red;
}

Use

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

In this example the "item4" element is highlighted with the red color.

:nth-child(n)

Select each element that is the number n child of a parent.

CSS

li:nth-child(2)
{
font:15px arial,sans-serif;
color:red;
}

Use

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

In this example the "second li" element is highlighted with the red color, in this example the text "item2" is highlighted.

:nth-last-child(n)

Select each element of the last n children of a parent counting from the bottom.

CSS

li:nth-last-child(2)
{
font:15px arial,sans-serif;
color:red;
}

Use

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

In this example the "second last li" element is highlighted with the red color, in this example the text "item3" is highlighte

:only-child

Select the child element that is the only child of the parent.

CSS

p:only-child
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
</div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this example the "paraghaph 1" element is highlighted with the red color that is the only child of the div element.

:first-of-type

Select the first element of a given type that is the first under the parent element.

CSS

p:first-of-type
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
</div>

In this example the "paragraph 1" element is highlighted with the red color.

:last-of-type

Selects the last element of a given type that is the last under a parent element.

CSS

p:last-of-type
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
</div>

In this example the "paragraph 1" element is highlighted with the red color, that means here "pragraph 1" is the first element of the type p under the div.

:nth-of-type(n)

Select the nth element of a given type that is at the nth place under a parent element.

CSS

p:nth-of-type(2)
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this example the "paragraph 2" element is highlighted with the red color, which means here "paragraph 2" is the second element of type p under the div.

:nth-last-of-type(n)

Select the nth last element of a given type that is at the nth place under a parent element from the last.

CSS

p:nth-last-of-type(2)
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this example, the "paragraph 3" element is highlighted with the red color, which means here "paragraph 3" is the last element of type p under the div from the last.

:only-of-type

Select only an element of a given type that is under a parent element.

CSS

p:only-of-type
{
font:15px arial,sans-serif;
color:red;
}

Use

<div>
<p> pragraph 1</p>
</div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this example the "paragraph 1" element is highlighted with the red color, because p is the only element of the given type.

:empty

Selects an element that is empty, in other words, doesn't have a child.

CSS

div:empty
{
width:100px;
height:20px;
background:red;
}

Use

<div></div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this all the text in the document is highlighted with the red color.

::selection

Highlight the text with the color selected.

CSS

::selection
{
background:green;
}

Use

<div> <p> pragraph 1</p> </div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>

In this all the text is highlighted with green that is selected in the document.

:not(HTMLElement)

does not apply the style to the specified HTMLElement.

CSS

:not(span)
{
font:15px arial,sans-serif;
color:red;
}
span
{
color:black;
}

Use

<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
<span> span data</span>

In this all the text in the p element is highlighted, in other words the style of the span element is not applied.

:enable

select all enabled elements.

:disable

select all disabled elements.

CSS

:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}

Use

Name: <input type="text" value="Pranay Rana" /><br>
Country: <input type="text" disabled="disabled" value="India" />

Here Name is highlighted with the red color and the country box is highlighted with green.

Conclusion

Most of the selectors are new here. Those are part of CSS3, I hope this is helpful and easy to understand. I covered most of the CSS selectors here but if there is something missing please place a comment below regarding it.

Leave a comment if you have any queries or if you like it. Prelease report if any link is not working or is broken.