Basic selectors

A selector represents a structure. This representation is then used in a CSS rule to determine what elements are selected to be styled by this rule. CSS style rules apply in the form of a waterfall effect. Each rule that is matched is also passed on to each of its children, matched and applied based on the weight of the selector. This section will only focus on the most basic of selectors.

The basic selectors are either type selectors, universal selectors, attribute selectors, class selectors, ID selectors, or pseudo-classes.

Note

All CSS selectors are case-insensitive. Selectors can also be grouped together to share rules. To group selectors, you just have to split them with commas. Consider the following example:

p { color: #ffffff; }
article { color: #ffffff }

Here, the following is the same as the preceding declaration

p, article { color: #ffffff }

The simple selector

The following selectors are all the simple selectors for CSS.

The type selectors

The type selectors selects based on the element name:

E
ns|E

Here, E is the element name and ns is a namespace.

Description

This is the simplest way to select elements—using their name. For the most part, when using just HTML, you not need to worry about the namespace, as all of the HTML elements are in the default namespace. An asterisk can be used to specify all namespaces, for example, *|Element.

When this selector is used, it will match all of the elements in the document. For example, if you have fifteen h2 elements and use a single h2 element, then this rule will match all fifteen.

Here are a few examples of the type selector. The first code sets all the h1 elements' font color to red. The next code applies red as the background color for all p elements:

h1 { color: #ff0000; }
p { background: #ff0000; }

The universal selector

The asterisk (*) represents any and all qualified elements:

*
ns|*
*|*

Here, ns is a namespace.

Description

This is essentially a wildcard selector. It will match every element. This is true even when used with other selectors. For example, *.my-class and .my-class are the same.

While you can use it as a single selector to match every element, it is most useful when used with other selectors. Following along with our preceding example, we may want to select any element that is a descendant of an article element. This selector is very explicit and easy to read, take a look at the following syntax:

article *

Here is an example. The first example uses attribute selectors to select any elements with hreflang in English, and the second example will select all elements in the document:

*[hreflang="en"] { display: block; background:url(flag_of_the_UK); }
* { padding: 0; }

The attribute selectors

These selectors will match against attributes of an element. There are seven different types of attribute selector and they are as follows:

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

These selectors are usually preceded by a type selector or universal selector.

Description

This selector is a way to use a regular expression syntax in a selector rule. Each of the selectors will act differently based on the use, so they are listed with the differences here:

• [attribute]: This matches an element that has the [attribute] attribute, irrespective of the value of the attribute.
• [=]: The value has to be an exact match.
• [~=]: This is used when the attribute takes a list of values. One of the values in the list must match.
• [|=]: This attribute must either be an exact match or the value must begin with the value followed immediately by a -.
• [^=]: This attribute matches the value that has this prefix.
• [$=]: This attribute matches the value that has this suffix.
• [*=]: This attribute matches any substring of the value.

The best way to really show the difference between these is to use some examples. We will look at the lang and href attributes. The examples will be in the same order in which they were introduced.

Here is the HTML file that the examples will be selecting.

<span lang="en-us en-gb">Attribute Selector</span>
<span lang="es">selector de atributo</span>
<span lang="de-at de">German (Austria)</span>
<a >HTTPS</a>
<a >Google</a>
<a >Example PDF</a>

Using the following, we should have all the spans with a lang attribute with a black background, Spanish will be grey, German will be red, English will be blue, anchor elements that have https attribute will be yellow, any PDFs will be red, and any anchor to Google will be green. Here are the preceding styles described:

span[lang] { background-color: #000000; color: #ffffff; }
span[lang="es"] { color: #808080; }
span[lang~="de-at"] { color: #ff0000; }
span[lang|="en"] { color: #0000ff; }
a[href^="https"] { color: #ffff00; }
a[href$="pdf"] { color: #ff0000; }
a[href*="google"] { color: #00ff00; }

The class selectors

This selector will match the HTML elements based on the class attribute of the element.

element.class
.class or *.class
element.class.another-class

Description

This is the most commonly used selector. Selecting based on the class attribute allows you to style elements in an orthogonal manner. Classes can be applied to many different elements and we can style each of those elements in the same manner.

The class selector can be stacked so that both classes will have to be present.

Here is some HTML with different elements that have a class attribute:

<h1 class="red">Red Text</h1>
<span class="red">Red Text</span>
<span class="green black">Green text, black background</span>
<span class="green">Normal text</span>

Here is the CSS to style the HTML:

.red { color: #ff0000; }
.green.black { color: #00ff00; background-color: #000000; }

When the red class is applied to an element, it will change the color of the text to red. The compound green and black will only select elements that have both classes defined.

The ID selectors

This selector will match based on the ID attribute of the element:

#id
element#id or *#id

Description

The ID attribute should be unique for the document, so the ID selector should only ever target one element. This is in contrast to the class selector, which can be used to select multiple elements. As an example, you can use a class selector to make every image on your page have a certain amount of margin and have a rule that specifically targets just your logo to have a different amount of margin.

Here is an example CSS rule that targets an ID of a logo:

#logo { margin: 10px; }