How to Use CSS Descendant Selectors

Save

Understanding CSS descendant selectors can help you target style rules for an exact area of your design.

Things You'll Need

  • A basic understanding of HTML
  • A basic understanding of CSS

It's all in the CSS syntax

  • A web page is organized in a hierarchy. The document hierarchy begins with html and descends through a tree structure that could include many elements within the body. Here's a simple tree diagram.

  • In the document tree, elements descend from the parent element that encloses them. In the example, there are lists that are the descendant elements of either the content div or the sidebar div. Furthermore, the lists are the ancestors of an A element (a hypertext link).

  • The CSS syntax for a descendant selector is to list the selectors separated by a space, (but not a comma). For example:

    content ul a {rule here}

    This selector targets an A element that is contained within a UL element that is contained within the CONTENT div. Other A elements on the page, perhaps one in a paragraph or in the SIDEBAR div, would not be affected by this selector.

  • To style a list or list item in the sidebar, use a descendant selector like this:

    sidebar ul {rule here}

    or

    sidebar li {rule here}

    To style a hyperlink in the sidebar that is not nested in a list, use selectors like this:

    sidebar a:link {rule here}
    sidebar a:visited {rule here}
  • To make P elements appear differently in the content area and the sidebar area, use descendant selectors like this:

    content p {rule here}
    sidebar p {rule here}
  • Descendant selectors can also be based with classes. For example, if every post on your blog was assigned to the class "blogpost" you could write a descendant selector for an em (emphasized) element in an h3 element that was part of a div in the class blogpost like this:

    h3.blogpost em {rule here}

  • Descendant selectors can become quite lengthy when you are targeting a very specific element on a complex page. For example:

    blogpost blockquote p em {rule here}

    It is the ability to get completely focused on one and only one element on a page using descendant selectors that give you the power to style your page in any way you desire.

Tips & Warnings

  • Using descendant selectors can eliminate the need to assign a lot of classes to page elements. For example, you could make a CSS rule for a class called .sidetext and assign that class to every individual paragraph you put in a sidebar. However, you could eliminate every one of those class assignments in the HTML using a single rule for the selector #sidebar p.

Related Searches

Promoted By Zergnet

Comments

Resources

You May Also Like

  • How to Style a Link with CSS

    Web page hyperlinks have many properties you can style. You can change color, underlining, background and many other aspects of appearance with...

  • How to Build Cascading Steps

    Cascading steps offer a simple solution to climbing a shallow rise on a pathway or accessing a low deck, patio, porch or...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!