Pin Me

Basic CSS Selectors Explained

written by: Bruno Kos•edited by: Amy Carson•updated: 1/12/2011

CSS selectors are used frequently in web development. Moreover, they are basics of website coding. Before moving to advanced CSS topics, every beginning web developer should understand them well.

  • slide 1 of 5

    Introduction

    CSS selectors are an essential part of the website’s markup. Basically, CSS selectors are part of the CSS rules matching an element (if ID) or set of elements (if class) within an HTML document. Roughly, CSS selectors can be divided into basic and advanced categories, but this article will discuss only the basic ones, since the majority of developers will unlikely use the benefits of advanced selectors.

  • slide 2 of 5

    Universal Selector

    The first CSS selector discussed is the Universal selector. The purpose of this selector is to match any element type. This selector uses the * sign, and its syntax is equivalent to the following:

    * {

    declarations

    }

    For example, if a developer wants to apply the margin:0; property to every element in an HTML document, the following line of code should be used:

    * {

    margin: 0;

    }

    Furthermore, consider the following example using the div * b selector:

    <div>

    <h2><b>Bold</b>Selector</h2>

    <b>Bold Again</b>but immediate child of the div tag

    </div>

    In this example, div * b selector (and corresponding declarations) will match <b>Bold</b>, but it will not match <b>Bold Again</b>, since it is an immediate child of <div> tag. In other words, there is nothing between the <b> and <div> * selector that could be matched.

    This example is provided to demonstrate the fact that the universal selector should never be confused with a wildcard character, since it does not match “zero or more elements.”

  • slide 3 of 5

    Element Type Selector

    An element type selector matches only the elements using the corresponding element type name. The basic syntax for this type of selector follows:

    E {

    declarations

    }

    For example, if the developer wants to apply padding:0; to all <li> elements within the document, the following piece of code should be used within the CSS stylesheet:

    li {

    padding:0;

    }

  • slide 4 of 5

    Class Selector

    Class selectors are used frequently in web development, offering a great way of applying one style to several HTML elements. This type of selector is declared by using the . sign before the desired class name. The basic syntax follows:

    .className

    {

    declarations

    }

    It is not allowed to use whitespace between . and the class name.

    Furthermore, the following method can be used as well:

    p.title

    {

    declarations

    }

    If this line of code is used, the properties of the “title” class will be applied to all <p> elements whose class attribute is set to “title”.

  • slide 5 of 5

    ID Selector

    In order to create a selector that will match particular elements within an HTML document, the ID selector should be used. Specifically, an ID selector will match only the elements whose ID attribute is set to that ID selector. Furthermore, it is important to note that ID selectors are unique (their values unique) and as such, ID selectors cannot match more than one element in an HTML document. ID selectors use the # sign, and the basic syntax follows:

    #IDName{

    declarations

    }

    For example, if a developer wants to define a specific set of CSS properties for the footer, the following piece of code should be used:

    #footer {

    declarations

    }

    Since an ID selector identifies an HTML element uniquely, it should be used “only” when necessary; in other words, a developer should consider carefully when to use an ID selector and when to use a class selector. Examples of “unique” (where the ID should be used instead of the class) HTML elements are the footer, header, content, main, sidebar and similar “core” elements of the website.

    Furthermore, it is possible to use an ID selector in the following way:

    ul#footer {

    declarations

    }

    This line of code will apply only to an unordered list element whose ID attribute value is equal to footer. As it is the case with class selectors, whitespace between # and ID name is not allowed.