Complex Selectors - Part1

Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.

Up until recently the focus of CSS never really touched on selectors. Occasionally there would be incremental updates within the selectors specification, but never any real ground breaking improvements. Fortunately, more attention has been given to selectors as of late, taking a look at how to select different types of elements and elements in different states of use.

CSS3 brought new selectors, opening a whole new world of opportunities and improvements to existing practices. Here we’ll discuss selectors, old and new, and how to best put them to use.

Common Selectors

Before diving too deep into some of the more complex selectors, and those offered within CSS3, let’s take a quick look at some of the more common selectors seen today. These selectors include the type, class, and ID selectors.

The type selector identifies an element based on its type, specifically how that element is declared within HTML. Theclass selector identifies an element based on its class attribute value, which may be reused on multiple elements as necessary to help share popular styles. Lastly, the ID selector identifies an element based on its ID attribute value, which is unique and should only be used once per page.

CSS

h1 {...}
.tagline {...}
#intro {...}

HTML

<section id="intro">
  <h1>...</h1>
  <h2 class="tagline">...</h2>
</section>

Common Selectors Overview

Example	Classification	Explanation
h1	Type Selector	Selects an element by it’s type
.tagline	Class Selector	Selects an element by the class attribute value, which may be reused multiple times per page
#intro	ID Selector	Selects an element by the ID attribute value, which is unique and to only be used once per page

Child Selectors

Child selectors provide a way to select elements that fall within one another, thus making them children of their parent element. These selections can be made two different ways, using either descendant or direct child selectors.

Descendant Selector

The most common child selector is the descendant selector, which matches every element that follows an identified ancestor. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.

The article h2 selector is a descendant selector, only selecting h2 elements that fall inside of an article element. Notice, no matter where a h2 element lives, so long as it is within the article element, it will always be selected. Additionally, any h2 element outside of the article element is not selected.

Below, the headings are lines 3 and 5 are selected, thus marked in bold.

CSS

article h2 {...}

HTML

<h2>...</h2>
<article>
  <h2>...</h2>
  <div>
    <h2>...</h2>
  </div>
</article>

Direct Child Selector

Sometimes descendant selectors go a bit overboard, selecting more than hoped. At times only the direct children of a parent element need to be selected, not every instance of the element nested deeply inside of an ancestor. In this event the direct child selector may be used by placing a greater than sign, >, between the parent element and child element within the selector.

For example, article > p is a direct child selector only identifying p elements that fall directly within an articleelement. Any p element placed outside of an article element, or nested inside of another element other than thearticle element, will not be selected.

Below, the paragraph on line 3 is the only direct child of it’s parent article, thus selected and marked in bold.

CSS

article > p {...}

HTML

<p>...</p>
<article>
  <p>...</p>
  <div>
    <p>...</p>
  </div>
</article>

Child Selectors Overview

Example	Classification	Explanation
article h2	Descendant Selector	Selects an element that resides anywhere within an identified ancestor element
article > p	Direct Child Selector	Selects an element that resides immediately inside an identified parent element