Skip to main content

What are the CSS selectors?

A CSS selector is the part of a CSS rule set that actually selects the content you want to style.

i) Universal Selector: The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page.

* {
   color: green;
   font-size: 20px;
   line-height: 25px;
}

ii) Element Type Selector: This selector match one or more HTML elements of the same name.

ul {
   list-style: none;
   border: solid 1px #ccc;
}

li {
    color: red;
}
<ul>
  <li>Fish</li>
  <li>Apples</li>
  <li>Cheese</li>
</ul>

iii) ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

#container {
   width: 960px;
   margin: 0 auto;
}
<div id="container"></div>

iv) Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class.

.box {
   padding: 20px;
   margin: 10px;
   width: 240px;
}
<div class="box"></div>

v) Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors, so you can be more specific in your selection method.

#container .box {
   float: left;
   padding-bottom: 15px;
}

This declaration block will apply to all elements that have a class of box that are inside an element with an ID of container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

<div id="container">
  <div class="box"></div>

  <div class="box-2"></div>
</div>

<div class="box"></div>

vi) Child Combinator: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

#container > .box {
   float: left;
   padding-bottom: 15px;
}

The selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element.

<div id="container">
  <div class="box"></div>

  <div>
    <div class="box"></div>
  </div>
</div>

vii) General Sibling Combinator: A selector that uses a general sibling combinator matches elements based on sibling relationships. The selected elements are beside each other in the HTML.

h2 ~ p {
   margin-bottom: 20px;
}

In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
  <p>Paragraph example.</p>
</div>

viii) Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

p + p {
   text-indent: 1.5em;
   margin-bottom: 0;
}

In this example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class="box">
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
</div>

ix) Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets

input[type="text"] {
   background-color: #444;
   width: 200px;
}
<input type="text">

The attribute selector can also be declared using just the attribute itself, with no value, like this:

input[type] {
   background-color: #444;
   width: 200px;
}

x) Pseudo-class: A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated.

a:hover {
   color: red;
}

xi) Pseudo-element: A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
<!DOCTYPE html>
<html>
  <head>
    <style>
      p::first-line {
        color: #ff0000;
        font-variant: small-caps;
      }

      p::first-letter {
        color: #ff0000;
        font-size: xx-large;
      }

      h1::before {
        content: url(smiley.gif);
      }

      h1::after {
        content: url(smiley.gif);
      }

      ::selection {
        color: red;
        background: yellow;
      }
    </style>
  </head>
<body>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s,
  <h1>when an unknown printer took a galley of type and scrambled it to make a
  type specimen book.<h1></p>
</body>
</html>