CodeinWP CodeinWP

CSS Selectors Defined

If you’re just getting started with CSS, it’s good to have a fundamental understanding of what we mean when we refer to CSS selectors. In this post I’ll briefly describe all the most well-known CSS selectors along with some examples.

A “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. Look at the two examples below:

.box {
  background-color: red;
}

form textarea {
  background-color: blue;
}

In each of those examples, the selector is the part of the rule set that appears before the opening curly brace. “.box” is the first selector and “form textarea” is the second selector.

Selectors Defined with Examples

Here is a brief definition of each type of selector, with examples:

Universal Selector
This selector consists of the asterisk character, like this:

* {
  background-color: red;
}

When used on its own like above, this selects every element on the page.

Element Type Selector
Also called just the “type selector”, this selector matches HTML elements by tag name. Two examples:

h2 {
  background-color: red;
}

div {
  background-color: red;
}

Class Selector
This selects an element that matches a class name defined in a class attribute in the HTML.

.element {
  background-color: red;
}

This is easily my favourite selector, and all good CSS developers should use it abundantly. You can put multiple classes separated by spaces on a single class attribute, which makes this selector quite powerful.

ID Selector
This selects an element that matches an id defined in an id attribute in the HTML.

#element {
  background-color: red;
}

Descendant Selector
This selector is defined with a space character separating two selectors, and represents a child element, but not just immediate children, further nested ones as well.

.parent .child {
  background-color: red;
}

Attribute Selector
This selector targets an element based on an HTML attribute and/or attribute value. Both examples below are valid attribute selectors:

div[style] {
  background-color: red;
}

input[type="text"] {
  background-color: red;
}

The first example targets any <div> element that has a “style” attribute. The second example targets any <input> element that has a “type” attribute with a value of “text”.

Child Selector
This selects an element based on it being an immediate child of another element:

.one > .two {
  background-color: red;
}

So this will not style a “.two” element unless it is an immediate child of a “.one” element. It can’t be nested inside another element, it has to be an immediate child element. And only the child is styled, not the parent.

Adjacent Sibling Selector
This selector, which uses the plus sign, targets elements that are “adjacent” to each other, or immediate siblings, and they must have the same parent element.

h2+p {
  background-color: red;
}

General Sibling Selector
This uses the tilde character and is exactly the same as the adjacent sibling selector except the elements don’t have to be immediate siblings.

h2~p {
  background-color: red;
}

Pseudo-class
While technically falling under the category of “selectors”, these are not normally referred to as “selectors”, but just pseudo-classes. These select an element based on a state the element is in. Here are a few examples:

a:visited {
  background-color: red;
}

input:focus {
  background-color: red;
}

Pseudo-element
Again, not normally referred to as a selector, these actually represent elements in the HTML page that are not really part of the rendered HTML:

p:first-letter {
  background-color: red;
}

p:before {
  content: "";
  background-color: red;
}

The “:before” and “:after” pseudo-elements are unique from other pseudo-elements in that they must be used along with the content property. For more on these, see my article on Smashing Magazine.

If you enjoyed this article, you might also like a post I wrote defining a number of different CSS Terms.

12 Responses

  1. Nice write up Louis! I don’t use the adjacent sibling selector or the general sibling selector that much myself, though it’s good to get a refresher on them. It might be nice to add browser support for each selector type next to the description of each for those who are just learning.

  2. Venkat says:

    Always good about revisit the basics.. Especially I have an eye open about Attribute Selector and Child Selector. Good info Louis. Love your website.

  3. Sohalt says:

    Thank you very much! Quick, short and simple explanation.

  4. Samiullah says:

    It’s time to use the new attribute,siblings and child selectors, rather then sticking with classes all around in your markup!

  5. Dennis says:

    The very first example has an error:

    form textarea {
    background: color: blue;
    }

    S/B

    form textarea {
    background-color: blue;
    }

  6. Matthew K says:

    Good write up for beginners or a CSS refresher.

    Perhaps I misunderstood the following description under “Class Selector”:

    “This is easily my favourite selector, and all good CSS developers should use it abundantly. You can put multiple classes separated by spaces on a single class attribute, which makes this selector quite powerful.”

    Shouldn’t multiple classes actually be separated with a comma, not just a space? Wouldn’t they be descendant selectors if only a space is used between them?

    • Oh, maybe that wasn’t clear enough. Notice that I said “multiple classes separated by spaces on a single class attribute”. That means in the HTML, not the CSS. So you would have this:

      
      <div class="class1 class2 class3"></div>
      

      And you could target it in your CSS like this:

      
      .class1.class2.class3 {
          /* whatever */
      }
      

      Or even by using any one of the classes alone, or two chained together, etc.

      Hope that clears it up.

  7. hemanjosko says:

    Really nice Article when i m stucked in designing i always prefer this website

    today i wrote something on CSS for more watch it please

    http://computertreat.com/css3-selectors-html/

  8. Hal Richman says:

    Aloha,

    This is an awesome explanation. It clearly defines all the selectors that one may find. It has cleared up my fogged mind!!

    thank you!!!

  9. PrairiePeg says:

    Louis, what a wonderful primer for CSS Selectors! I was able to follow the beginning.

    For me I need an application to use the “new information,” and then learning by using. I am considering parent-child.

    Thank you, again. As a pensioner/retiree I need to make requisite number of errors and then identify them, correct the error(s).

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).