CSS Selectors

Last Updated: March 26, 2022

There are several CSS selectors available to work with HTML/CSS

Basic Selectors

1. *

Every single element on a page

* {
 margin: 0;
 padding: 0;
}

2. #

target by ID. 

#container {
   width: 1024px;
   margin: auto;
}

You can not reuse this CSS because it is only for one element

3. X

class the selector target group of elements

.msg {
  color: green;
}

4. X

Target all the elements of the page according to the type of the element

a { color: blue; }
ul { margin-left: 0; }

Combinator selectors

5 X Y

ul li {
  margin-left: 10px;
}
<ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
</ul>

This is a descendant selector to target all li inside the ul tag

6 X+Y

This is called adjacent selector to select immediate element just after the former element.

ul + p {
   color: red;
}

The first paragraph after the ul element will be selected.

7 X>Y


This is the same as the adjacent selector but this will select the immediate child element

8 X~Y

This is a sibling combinator

Attribute Selectors

9. X[title]

a[title] will select the tags which have the title attribute.

a[title] {
   color: green;
}

10. X[href=url]

Select an anchor tag with a given URL

a[href="https://www.codekayak.net"] {
  color: #83b348; 
}

11. X[href*="foo"]

Select an anchor tag where the given keyword is in the URL

a[href*="code"] {
  color: #83b348;
}

Any URL with the keyword “code” will be selected

12. X[href^="http"]

Regular expression symbol ^ is to search a string by specifying the beginning of characters

<a href="http://domain.com/img/A.jpg" > A </a>
<a href="img/B.jpg" > B </a>

If you want to selector anchor tag with href attribute starting with http

a[href^="http"] {
   color: red;
}

13. X[href$=".jpg"]

<a href="img/A.jpg" > A </a>
<a href="img/B.jpg" > B </a>
<a href="img/C.png" > C </a>
<a href="img/D.jpg" > D </a>

You want to select the .jpg anchors you can use the regular expression $

a[href$=".jpg"] {
   color: red;
}

14. X[data-*="foo"]

You can define custom attributes and select them

<div code-lang="java">Java </div>
<div code-lang="php">PHP </div>
<div code-lang="c">C </div>

Now if you want to select Java then use the following CSS

a[code-lang="java"] {
   color: red;
}

15. X[foo~="bar"]

An attribute can have several values like below

<div data-set="Java PHP" > Languages </div>

With this, you can target above 

div[data-info~="java"] {
   color: red;
}
 
div[data-info~="PHP"] {
   border: 1px solid black;
}

Pseudo Selectors

16. X:visited X:links

:link pseudo-class to target all links which have not been clicked

: visited pseudo-class to target all the links visited

a:link { color: red; }
a:visited { color: purple; }

17. X:checked

target radio button and checkbox that has been checked

input[type=radio]:checked {
   border: 1px solid black;
}

18. X::after

To do creative things with CSS before and after pseudo-classes are great. This enables you to insert content into elements without using HTML. You do not find those content inside the DOM

div::before {
  content: "before";
}
div::after {
  content: "after";
}

Your HTML will be like this

<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

The following content can be added :before and :after

19 X:hover

You can select the element when you mouser over the element

div:hover {
  background: #e3e3e3;
}

20. X:not(selector)

Not is used to exclude given selector

<div >
   <div class="summary"> Summary goes here </div>
   <div class="detail"> Details here </div>
</div>

If you want to change the color of the fonts of the details section you can use the :not

div:not(#summary) {
   color: blue;
}

21. X::pseudoElement

Nth Child and Type Selectors

22. X:nth-child(n)

nth-child(n) matches the n th child of its parent

<ul>
 <li> Physics </li>
 <li> Chemistry </li>
 <li> Mathamatics </li>
</ul>

If you want to select 2nd chid of ul you can use the following style class

ul:nth-child(3) {
   color: red;
   font-style: bold;
}

23. X:nth-last-child(n)

nth-last-child(n) matches the elements from its parents but n the element is counting from the last child

<ul>
    <li>Chemistry</li>
    <li>Physics</li>
    <li>Maths</li>
    <li>Computer Science</li>
</ul>
 li:nth-last-child(2) {
    color: red;
    font-weight: bold;
 }

24. X:nth-of-type(n)

The :nth-of-type() matches elements based on their position among siblings of the same type (tag name).

 p:nth-of-type(3) {
     color: red;
     font-weight: bold;
 }

This will match the 3rd p element of the group

<div>
    <p>Paragraph 1</p>
    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>

25. X:nth-last-of-type(n)

The :nth-last-of-type() matches elements based on their position, from the last among siblings of the same type (tag name).

 p:nth-last-of-type(3) {
     color: red;
     font-weight: bold;
 }

26. X:first-child

The :first-child select the first element among a group of sibling elements.

 p:first-child{
      color: red;
      font-weight: bold;
 }

27. X:last-child

The :last-child select the last element among a group of sibling elements.

last-child{
   color: red;
   font-weight: bold;
}

28. X:only-child

The :only-child select the element without any sibling

p:only-child {
  background-color: lime;
}

You can achieve the same thing with following CSS pseudo-classes

  • :first-child
  • :last-child
  • :nth-child(1)
  • :nth-last-child(1)

29. X:only-of-type

The :only-of-type select an element but it does not have a sibling of the same type.

p:only-of-type {
  color: red;
}

30. X:first-of-type

The :first-of-type select the first element of its type among a group of sibling elements.

p:first-of-type {
  color: red;
}
Test