CSS Selectors

2019-08-26

Development

CSS Complex Selectors

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. The class 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 its 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 on lines 3 and 5 are selected:

css:

article h2 {...}

html:

1
2
3
4
5
6
7


<h2>...</h2>
<article>
  <h2>This heading will be selected</h2>
  <div>
    <h2>This heading will be selected</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 article element. Any p element placed outside of an article element, or nested inside of another element other than the article element, will not be selected.

Below, the paragraph on line 3 is the only direct child of its parent article, thus selected.

css:

article > p {...}

html:

1
2
3
4
5
6
7


<p>...</p>
<article>
  <p>This paragraph will be selected</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

Sibling Selectors

Knowing how to select children of an element is largely beneficial, and quite commonly seen. However sibling elements, those elements that share a common parent, may also need to be selected. These sibling selections can be made by way of the general sibling and adjacent sibling selectors.

General Sibling Selector

The general sibling selector allow elements to be selected based on their sibling elements, those which share the same common parent. They are created by using the tilde character ~ between two elements within a selector. The first element identifies what the second element shall be a sibling with, and both of which must share the same parent.

The h2 ~ p selector is a general sibling selector that looks for p elements that follow, and share the same parent, of any h2 elements. In order for a p element to be selected it must come after any h2 element.

The paragraphs on lines 5 and 9 are selected as they come after the heading within the document tree and share the same parent as their sibling heading:

css:

h2 ~ p {...}

html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>This paragraph will be selected</p>
</section>

Adjacent Sibling Selector

Occasionally a little more control may be desired, including the ability to select a sibling element that directly follows after another sibling element, which is where the adjacent sibling element comes in. The adjacent sibling selector will only select sibling elements directly following after another sibling element. Instead of using the tilde character, as with general sibling selectors, the adjacent sibling selector uses a plus character + between the two elements within a selector. Again, the first element identifies what the second element shall directly follow after and be a sibling with, and both of which must share the same parent.

Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element.

The paragraph on line 5 is selected as it directly follows after its sibling heading along with sharing the same parent element, thus selected.

css:

h2 + p {...}

html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

Sibling Selectors Overview

Example	Classification	Explanation
h2 ~ p	General Sibling Selector	Selects an element that follows anywhere after the prior element, in which both elements share the same parent
h2 + p	Adjacent Sibling Selector	Selects an element that follows directly after the prior element, in which both elements share the same parent

Examples

css dot

Selector	Example	Example description
.class1.class2	.name1.name2	Selects all elements with both `name1` and `name2` set within its class attribute
element.class	p.intro	Selects all `<p>` elements with `class="intro"`

How to set CSS hover on input

css

input[type="search"].my_searchTerm:hover {
  border: 5px solid blue;
}

HTML

1
2
3
4
5
6
7


<div class="my_search_wrap">
 <form class="my_search" role="search" method="get" target="_blank">
   <input type="search" name="q" class="my_searchTerm" placeholder="Search">
   <button type="submit" class="my_searchButton"></button>
   <input type="hidden" name="sitesearch" value="">
  </form>
</div>