CSS Selector Implementation Guide

Explanation of CSS selectors and how to use them in Chrome browser.

CSS selectors
Chrome console
References

CSS selectors

Selectors

A CSS selector is composed of between 1 and 5 parts:

Big selector example:

input[type="checkbox"]#toggle.checkboxes:checked::before

By type: tag[attribute]#id.class:pseudo-class::pseudo-element

tag

A tag is the name of a DOM element.

Any valid HTML tag (a.k.a. HTML tag name, node name)

If a pattern needs to match all tags, use an asterisk ∗

Examples:

div
input
p
form
*

[attribute]

Any valid HTML attribute

[attr] Pattern of a tag with an attribute name of "attr".

Example: Match all tags with an id attribute.

[id]

Pattern with operator

For consistent results and maximum flexibility, wrap the value in double-quotes.

[attr="value"]  Equal to
[attr^="value"] Starts with
[attr$="value"] Ends with
[attr*="value"] Match a substring
[attr~="value"] Contains the word
[attr|="value"] Starts with the word

[attr="value"] Pattern of a tag with an attribute name of "attr" and whose value is exactly "value".

Example: Match all tags with a type attribute that equals "reset".

[type="reset"]
*[type="reset"]  <-- same result

[attr="value" i] Adding a space and the letter i (or I) before the closing bracket is a case-insensitive match (for characters within the ASCII range).

Example: Match all tags with a title attribute that starts with "Menu", "MENU", "mEnU", etc.

[title^="Menu" i]

[attr^="value"] Pattern of a tag with an attribute name of "attr" and whose value starts with "value".

Example: Match all tags with a class attribute that starts with "container".

[class^="container"]

[attr$="value"] Pattern of a tag with an attribute name of "attr" and whose value ends with "value".

Example: Match all tags with a class attribute that ends with "dropnav".

[class$="dropnav"]

[attr*="value"] Pattern of a tag with an attribute name of "attr" and whose value contains at least one occurrence of string "value" as substring.

Example: Match all tags with a id attribute that contains "nav".

[id*="nav"]

[attr~="value"] Pattern of a tag with an attribute name of "attr" and whose value contains at least one occurrence of word "value".

Example: Match all tags with a id attribute that contains the whole word "navbar".

[id~="navbar"]

[attr|="value"] Pattern of a tag with an attribute name of "attr" and whose value contains at least one occurrence of word "en" or followed by a hyphen.

Example: Match all tags with a id attribute that contains the whole word "navbar".

[lang|="en"]

Note: The value has to be a whole word, either alone, like lang="en", or followed by a hyphen( - ), like lang="en-us".

Concatenating patterns

Patterns can be concatenated.

Example: Match all tags with a class attribute that ends with "dropnav", with a id attribute that contains "nav", and with a title attribute that starts with "Menu", "MENU", "mEnU", etc.

[class$="dropnav"][id*="nav"][title^="Menu" i]

Putting tag and [attribute] together

Example: Matches all div tags with a class attribute that starts with "red".

div[class^="red"]

Example: Match all input tags with a type attribute of "reset" and a value attribute of "Cancel".

input[type="reset"][value="Cancel"]

id

Alias of [id="value"]

ID selector reference

Examples:

#submit-button
#section-1

Putting tag and/or [attribute] and #id together

div[class^="red"]#section-1
div#section-1
[class$="dropnav"]#section-1

Finding an invalid id

Before HTML5, id and name attribute values had to start with a letter (upper case or lower case), else they were invalid.

HTML5 specifications are allowing id and name attribute values to start with a letter, a digit, or any punctuation character.

No spaces are allowed.

But #id will not work if an id doesn't start with a letter (upper case or lower case).

To find an id when the first character is not a letter, use [id="01value"]

.class

Alias of [class~="value"]. Grabs the matching word of the class value; the value could be a whitespace-separated list of words.

Class selector reference

Examples:

.container
.col-sm-6

Putting tag and/or [attribute] and/or #id and .class together

input[type="submit"].red
p.red
.red#section-1
#section-1.red

Getting a tag by two or more class names

Concatenate class names without spaces

.container.main

:pseudo-class

Defines a special state of a tag.

Pseudo-classes reference

Examples:

:disabled
:checked
:first-child
:empty
:not()

Putting tag and/or [attribute] and/or #id and/or .class and :pseudo-class together

input[type="submit"].red#section-1:disabled
p.red:last-of-type
[type="checkbox"].container:checked
a[href^="http"]:not([href^="https"])
input[type="reset"][value="Cancel"]:hover

::pseudo-element

Styles a specified part of an element.

Pseudo-elements reference

Examples:

::first-line
::before
::after

Putting tag and/or [attribute] and/or #id and/or .class and :pseudo-element together

div.container#section-1::before
[type="checkbox"]::after
p::first-line

Combinators

Combinator summary table

	descendant (nested)	sibling (not nested)
general	space	∼
specific	>	+

Descendant selectors: space

Descendant selectors

To get a DOM element that is a descendant nested inside another element (no matter what level), combine two or more selectors separated by a space.

Example:

div.container p.red

Will match:

<div class="container">
    <p class="red">Text</p>  <--
</div>
<div class="container">
    <h1>Title</h1>
    <p class="red">Text</p>  <--
</div>

Other examples:

.container form [type="button"]
a img[src$=".jpg"]
table tbody tr td:first-of-type

Child selectors: >

Child selectors

To get a DOM element that is a direct child nested inside another element (only one level inside), combine two or more selectors separated by >

Examples:

div.container > p.red

Will match:

<div class="container">
    <p class="red">Text</p>  <--
</div>

Will not match:

<div class="container">
    <h1>Header</h1>
    <p class="red">Text</p>
</div>

General sibling selectors: ∼

General sibling selectors

To get a DOM element that follows another element at the same level (not nested) of another element, combine two or more selectors separated by ∼

Examples:

div.container p.red ~ p.blue

Will match:

<div class="container">
    <p class="red">Text</p>
    <p class="blue">Text</p>  <--
</div>
<div class="container">
    <h1>Header</h1>
    <p class="red">Text</p>
    <h2>Header</h2>
    <p class="blue">Text</p>  <--
</div>

Adjacent sibling selectors: +

Adjacent sibling selectors

To get a DOM element that directly follows another element at the same level (not nested), combine two or more selectors separated by +

Examples:

div.container p.red + p.blue

Will match:

<div class="container">
    <p class="red">Text</p>
    <p class="blue">Text</p>  <--
</div>

Will not match:

<div class="container">
    <h1>Header</h1>
    <p class="red">Text</p>
    <h2>Header</h2>
    <p class="blue">Text</p>
</div>

Multiple elements

To get multiple DOM elements, combine two or more selectors separated by a comma.

Examples:

.red, .blue

Will match:

<div class="container">
    <p class="red">Text</p>   <--
    <p class="blue">Text</p>  <--
</div>
<div class="container">
    <h1>Header</h1>
    <p class="red">Text</p>   <--
    <h2>Header</h2>
    <p class="blue">Text</p>  <--
</div>

Chrome console

The purpose of the Chrome console is to interactively execute JavaScript in the browser.

We use the Chrome console to find and highlight DOM elements in a browser window.

$$() is an alias of document.querySelectorAll() in JavaScript.
$() is an alias of document.querySelector() in JavaScript. $() is a shortcut to find the first element in a $$() array.

To find DOM elements in a browser, use the $$() command inside the Chrome console. The result is an array of the "outerHTML" of each DOM element found.

"outerHTML" refers to the HTML code that includes the DOM element itself plus all its nested elements.
"innerHTML" refers to the HTML code that includes all the nested elements inside the DOM element, excluding the DOM element itself.

Display the console

Start the Chrome browser.
Go to https://www.google.com/search?q=nationwide+insurance
Press F12 or Ctrl-Shift-I
The Chrome console appears.
- First icon button is "Inspect".
- First named navbar item is "Elements".
- Second named navbar item is "Console".

The console