Selectors in CSS 3

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 a 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 are 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.

Demo

---

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.

Demo

---

HtmlElement + HtmlElemnt: Selects all the HTML elements that are immediately after a 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.

Demo

---

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.

Demo

---

[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.

Demo

---

[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.

Demo

---

[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".

Demo

---

[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".

Demo

---

[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".

Demo

---

[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.

Demo

---

: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.

Demo

---

: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.

Demo

---

: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.

Demo

---

: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 highlighted

Demo

---

: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.

Demo

---

: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.

Demo

---

: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.

Demo

---

: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, that means here "pragraph 2" is the second element of type p under the div.

Demo

---

: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, that means here "pragraph 3" is the last element of type p under the div from the last.

Demo

---

: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.

Demo

---

: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.

Demo

---

::selection: Highlights 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.

Demo

---

: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.

Demo

---

: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.

Demo

---

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 query or if you like it. Prelease report if any link is not working or is broken.