Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

CSS selectors: the basics

Kev Stone | 1 March 2007

For anyone who has been using CSS for some time, CSS selectors become almost second nature. For those who are new to CSS, however, selectors are powerful tools that allow you to write cleaner, more efficient markup. This article will guide you through some of the basic concepts of CSS selectors.

Element selectors

Element selectors are the most basic selectors found in CSS. They allow you to style any HTML element found within your markup, e.g.,

,

    , or
    . For example:

    p {color: blue;}

    This example simply makes any text found within a

    element the color blue.

    Group selectors

    Group selectors build upon the idea of element selectors but allow you to set the same styles to a number of HTML elements, as opposed to only one. For example, if you wanted to make your

    and

    elements bold, then you could write the styles as follows:

    p {font-weight: bold;} h1 {font-weight: bold;}

    This example will get the desired result, but with group selectors you can drastically reduce the size of your stylesheet by simply placing both the selectors on the left side of the style rule, and separating them with a comma, as shown below:

    p, h1 {font-weight: bold;}

    Note: The comma between the two elements is very important; failure to use a comma will give this rule a completely different meaning and will instead create a descendant selector, which is discussed later.

    Class and ID selectors

    The previous selectors have dealt with all HTML elements that are found within your HTML document. If you wish to set a style rule for something more specific, the most frequently used options are class or ID selectors. For example, if you have a paragraph in the sidebar of the page, you might want the words in it to have a different color than words on the rest of the page. A class selector for a

    element is written in the HTML document as:

    An ID selector is written as:

    The addition of the class/ID selectors now allows you to set various style rules to the

    elements found within your document, yet also allows you to specify different style rules for the

    elements which contain a class or ID attribute.

    If, for example, you wanted your

    elements to be the color red, yet wanted two or more

    elements in the sidebar to be the color blue, then you would assign these

    elements a class attribute (as shown above) and would write your style rules as follows:

    p {color: red;} p.sidebar {color: blue;}

    If you wanted to make only one

    element the color blue then you would use an ID attribute (as shown above) and would write your style rules as:

    p {color: red;} p#sidebar {color: blue;}

    Note: Each ID must be used on only one element on a page. If you wish to assign the specific style rules to more than one element, then you should use a class. For example, only one

    in an HTML document can have an ID called “sidebar,” whereas, a paragraph and a heading and a list, or three paragraphs could all have the same class. It's also important to note that an ID selector will overrule a class selector that refers to the same element.

    Descendant selectors

    Descendant selectors allow you to select an element that is a descendant of another specified element. For example, if you wanted to make every element that is found within a

    element the color blue, then you could either markup every element with a class attribute as outlined above, which would be very time-consuming, or you could use descendant selectors. Descendant selectors are written very much like group selectors with the exception that they do not use a comma. In order to make every element that is found within a

    element the color blue, you would write your style rule as:

    p strong {color: blue;}

    Descendant selectors are used regularly at more advanced levels, as they allow authors to specify style rules to various elements, and can quite often allow them to set very specific style rules without needing to use class or ID selectors. For example, it is quite common to see the example below used to style page navigation:

    ul#nav li a {color: blue;}

    Whilst this may look confusing at first, the key to being able to understand descendent selectors is simply to read them backwards. Taking this into account, the above example therefore states that:

    Every > element found within an > element that is found within a > element with the ID of “nav” (therefore

      >), is to be colored blue.

      This article has outlined a number of the most basic CSS selectors which, if understood clearly, will allow any author to write much more efficient HTML and CSS. This article by no means covers the bulk of what can be done with CSS selectors, yet it does show some of the simplest and most commonly used tasks that they can perform.

      Resources

      More on CSS selectors can be found at these locations:

      About the Author

      Kev Stone is a freelance web designer from Leeds, UK, where he operates his company Magic Sandwich. He is a strong believer in web standards and a lover of all aspects of design. When not designing websites or writing tutorials, Kev will either be found writing at his blog, Magic Something, or he will be pestering his friends in some way.

      Articles by Kev Stone

      10 Comments

      | Post a comment | Comments Feed

      1. ReeseReese�s site : http://www.designbyreese.com

        1 March 2007, 06:52 : Permanent link to comment

        Is it possible to do group selection on class or id selectors, such as:

        #sidebar h2, #footer h2 {}

        I’ve tried it and haven’t found a way for it to work. I’ve also tried: #sidebar, #footer h2 {}
        to no avail.
        It’s probably not possible, but if so, I’d love to see a solution :)

      2. pauldwaitepauldwaite�s site : http://pauldwaite.co.uk/

        1 March 2007, 10:16 : Permanent link to comment

        @Reese: I’m not entirely clear on what you’re trying to achieve, but here’s what your examples do.

        Your first example “#sidebar h2, #footer h2 {}” would select all h2 elements descended from the element with an id of “sidebar”, and all h2 elements descended from the element with an id of “footer”.

        Your second example would select the element with an id of “sidebar”, and and all h2 elements descended from the element with an id of “footer”.

      3. Mauricio Samy SilvaMauricio Samy Silva�s site : http://www.maujor.com/

        1 March 2007, 11:13 : Permanent link to comment

        Well done Kev! CSS selectors is a powerful tool in developers hands.

        1-) Since an ID must be unique within a document some authors do prefer omit the HTML element when written CSS rules. Like so:
        #sidebar and #nav li a
        instead of
        p#sidebar and ul#nav li a
        This, sometimes can save a bit of bites ;)
        But, be aware: The full syntax as showed on the article has a higher specificity.

        2-) There is an interactive PHP-based page where one can play and see CSS 2.1 selectors in action on the fly and is hosted at: http://www.maujor.com/tutorial/isel-en.php

      4. Mauricio Samy SilvaMauricio Samy Silva�s site : http://www.maujor.com/

        1 March 2007, 11:19 : Permanent link to comment

        Sorry!
        Fixing the link on my previous comment
        http://www.maujor.com/tutorial/isel-en.php

      5. EnblogopediaEnblogopedia�s site : http://www.enblogopedia.com/

        2 March 2007, 01:35 : Permanent link to comment

        Hey, nice article for beginners!
        BTW...where were you people? :)

      6. ReeseReese�s site : http://www.designbyreese.com

        2 March 2007, 22:17 : Permanent link to comment

        Hi Paul,
        Thanks for breaking down my examples for me. What I was trying to acheive was to say, for example, that I want the h2 element in both my sidebar AND my footer to have the same styling, without having to write the rules twice in my stylesheet. So instead of having to write: #sidebar h2 {margin: 0;}

        #footer h2 {margin: 0;}

        It would be nice to write: #sidebar h2, #footer h2 {
        margin: 0;}
        or #sidebar, #footer h2 {
        margin: 0;}

        make sense? thank you! :)

      7. ScottScott�s site : http://www.scottmaira.com

        7 March 2007, 01:47 : Permanent link to comment

        What’s the difference between: h2#container and #container h2 ?

        Does the first example have a higher specificity? If so, do you know the value? Sometimes the first example doesn’t work but the second one does…

      8. James John MalcolmJames John Malcolm�s site : http://james.gameover.com/

        9 March 2007, 18:07 : Permanent link to comment

        Enblogopedia: Just being busy and ensuring the quality ;)

      9. Tom EdwardsTom Edwards�s site : http://steamreview.org/

        19 March 2007, 11:50 : Permanent link to comment

        Is there a way to write non-descendant selectors that don’t apply to elements’ children?

      10. Mauricio Samy SilvaMauricio Samy Silva�s site : http://www.maujor.com/

        24 March 2007, 11:14 : Permanent link to comment

        Scott
        h2#container and #container h2 are two different types of selectors.

        h2#container is a type selector and is more specific than h2. This selector matches h2 elements whose ID is container.

        #container h2 is a descendant selector and is more specific than h2 or #container. This selector matches h2 elements that are children of the element whose ID is container.

        Tom Edwards
        Yes there is!
        CSS3 provides the NEGATED selector and the sintax is:
        C:not(E) {property:value}
        This selector apply the CSS rule to all elements that are children of C elements except to E elements.
        As far as I know, actually Mozillas and Opera browsers do support it. And… !surprise, IE doesn’t :(


    Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors