Welcome to CSS Basics. More info on this section at the bottom of this post.

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.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

Advertise Here

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

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

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

  5. The very first example has an error:

    form textarea {
    background: color: blue;
    }

    S/B

    form textarea {
    background-color: blue;
    }

  6. Matthew K:

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

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.