CSS Selectors

Selector Types

CSS selectors are part of CSS syntax that determine which HTML elements CSS rules will be applied to.

Universal selector

The universal selector is denoted by * (asterisk), and its characteristic is that it selects all elements. This selector is commonly used when resetting styles.

Example

Defined by HTML element type

These are the simplest selectors and are defined by the name of the HTML element they target.

Example

or

Defined by element class

These selectors “target” HTML elements that contain a specific class.

Example

A selector that targets a class is denoted with . (dot) before the class name.

Defined by element ID

These selectors “target” HTML elements that contain a specific ID. They are denoted with the # sign before the ID name.

Example

A selector that targets an element with a specific ID is denoted with the # sign before the ID.

Defined by element attribute

HTML elements often contain attributes, so it is convenient to use them to select the element to which a style should be applied. A selector that targets an element by attribute is denoted with [ ] square brackets.

[attribute]

The selector in the following example applies to all HTML elements that contain the “href” attribute.

Example

[attribute*=”value”]

This selector is more specific than the previous one because, in addition to targeting an element that has a specific attribute, it must contain a specific character string within the attribute value. This part does not have to be a whole word; it can be part of a word.

Example

In the previous example, the element that has the link attribute is selected, and the value of that attribute must contain the character string str. With such a selector, the following element would also be selected:

[attribute~=”value”]

This selector is more specific than the previous one because, in addition to targeting an element that has a specific attribute, it must contain the entire desired word within the attribute value. That word must be separated by whitespace.

Example

This selector would select the following element:

[attribute|=value]

This selector is similar to the previous one because the attribute must contain the entire desired word within the attribute value, but that word is separated by a | vertical bar.

Example

The previous selector would select the following element:

[attribute^=value]

This selector selects an element whose attribute starts with a specific character string.

Example

So the previous selector could select the following element whose href attribute starts with http://:

[attribute$=value]

This selector selects an element whose attribute ends with a specific character string.

The previous selector would select the following element:

Example

The following example shows the use of attribute-based selectors that allow adding an appropriate icon depending on the document type:

See the Pen Attribute Selectors by ProSystem Studio (@chos) on CodePen.

[attribute=”value”]

This selector is more specific than all the previous ones because it selects all elements that have a specific attribute, and that attribute must have the exact required value. In the following example, we will select a link element that has the href attribute with the value http://neka_stranica.com

Example

Pseudo-classes — dynamic

State pseudo-classes are a way of selecting parts of an HTML document that include the dynamic state of an element. Pseudo-class syntax attaches the pseudo-class name to another selector (selector:pseudo-class).

:visited

This pseudo-class selects links that have already been visited.

Example

:link

This pseudo-class selects links that have not been visited.

Example

:hover

This pseudo-class selects any element (not just links!) over which the pointer is positioned.

Example

:focus

This pseudo-class selects an element in focus. Focus is similar to hover, but when using the keyboard to navigate through the page. A good example of a focused element is an input field in an HTML form.

Example

:active

This pseudo-class targets an element when it is active. An element is active from the moment it is clicked until the mouse button is released.

Example

See the Pen :active state by ProSystem Studio (@chos) on CodePen.

:enabled

This pseudo-class selects an element that is in the enabled state, i.e. available for interaction. Elements that have this state are: <input<, <select>, <textarea<, <optgroup>, <option<, <fieldset>. It is most commonly used with an input tag inside a form.

Example

In this example, we target the label element after an input field that is available for data entry.

::disabled

This pseudo-class selects an element that is in the specific disabled state when the element is not active, i.e. unavailable for input. An example is a non-selected input field.

Example

Example of using :enabled & :disabled

See the Pen :enable by ProSystem Studio (@chos) on CodePen.

:checked

This pseudo-class selects elements that are in the specific checked state. The checked state is usually associated with:

• radio button (<input type=”radio”>)
• checkbox (<input type="checkbox">)
• option (<option> in a <select>)

Example

See the Pen :checked by ProSystem Studio (@chos) on CodePen.

Pseudo-classes — positional

:first-child

This pseudo-class selects the first element within a parent element, i.e. it selects any type of element that is the first child within the parent element.

Example

See the Pen :first-child by ProSystem Studio (@chos) on CodePen.

:last-child

This pseudo-class behaves the same as the previous one, except that it selects the last child in the parent element.

:nth-child(n)

This pseudo-class selects every nth child of the parent element.

See the Pen CSS-Tricks: :nth-child by ProSystem Studio (@chos) on CodePen.

:nth-last-child(n)

This pseudo-class selects elements counting from the end!

Example

In the following example, we will select the last four rows of a table:

Example

In the following example, we select every even element, but starting “from the end toward the beginning”

:first-of-type

This pseudo-class selects the first element within a parent element of a specific type. This is important when a shared parent contains different types of elements within it.

If we want to select the first paragraph, we use:

Note:
the p:first-child selector would not work in this case because the paragraph is not the first child of its parent, since there is another element type within the parent <article> that comes before the paragraph.

:last-of-type

This pseudo-class behaves the same as the previous one, except that it selects the last child of a specific type in the parent element.

:nth-of-type(n)

This pseudo-class selects every nth child of a specific type in the parent element.

:nth-last-of-type(n)

This pseudo-class selects elements of a specific type in the parent element “counting from the end”!

Pseudo-classes — general

:empty

This pseudo-class selects an element that has no children.

Example

This selector would select the following element:

:not

This pseudo-class behaves as a negation:

Example

The pseudo-class from the previous example selects all buttons that are not disabled.

NOTE on spacing!
A pseudo-class is appended to a selector without a space. If a space exists, a complex selector is created.

Pseudo-elements

Pseudo-elements “resemble” HTML elements, but they are not standard HTML elements.

::before

This selector allows styling a part that is not yet defined in the document and that comes before another element.

::after

This selector allows styling a part that is not yet defined in the document and that will come after another element.

See the Pen Pseudo Elements ::before and ::after by ProSystem Studio (@chos) on CodePen.

::first-letter

This selector targets the pseudo-element “first letter”.

See the Pen Pseudo Element ::first-letter by ProSystem Studio (@chos) on CodePen.

::first-line

This selector targets the pseudo-element “first line”.

NOTE:
Pseudo-elements cannot be applied to inline styles and must be the last defined in the selector chain. When used, they should be placed after a class or ID selector, and only one pseudo-element can be defined per selector.

Selectors for elements in specific relationships

Elements from the same lineage

If we want to select a descendant of a selector and thereby increase specificity, it is enough to add another selector and place a space between them.

See the Pen Descendants of One Family Line by ProSystem Studio (@chos) on CodePen.

Element with two arguments

If we place two HTML elements in a selector side by side without a space, we will not get the same effect as when a space exists. See the difference in the following example.

See the Pen Sibling Selector by ProSystem Studio (@chos) on CodePen.

Direct child element “el1>el2”

Applies to all elements that are direct children of their parent (does not apply to “grandchildren”)

See the Pen Element Whose Parent Is… by ProSystem Studio (@chos) on CodePen.

Immediately following sibling element “el1+el2”

The function of this selector is to select the “sibling” element, i.e. the one that comes immediately after the first selected element type.

See the Pen Adjacent Siblings by ProSystem Studio (@chos) on CodePen.

Element with a preceding sibling “el1~el2”

Applies to every element that is preceded somewhere in the code by another element (they do not have to be adjacent)

See the Pen ExampleEdit by ProSystem Studio (@chos) on CodePen.

Conclusion

Choosing the right selector can be very confusing if you approach the problem from the wrong angle. I will explain this with an example of a main menu whose color I want to change on hover. If I choose selectors as in the first example, I will change the color of only one element, while in the second example I affect the entire menu branch.

See the Pen Element Layout by ProSystem Studio (@chos) on CodePen.

Explanation:
In the previous example, the difference is drastic due to the order of elements within the selector. In the first case, the hover affects the “a” tag within the “li” tag, while in the second case the hover affects the “li” tag (the “li” tag is the entire branch — see the code below) and all “a” tags within it.

Factors That Affect Selector Importance

a) Position where the style is defined

Depending on the location where a style is defined, its “importance” varies. The following list is sorted by style location importance from strongest to weakest:

1. Browser-defined styles apply default styles to defined tags
2. User-defined styles in the browser are browser styles additionally defined by the user
3. Author styles that you write as the author:
   • 3.1 Inline styles inserted into a tag apply only within that tag
   • 3.2 Styles written in HTML are styles inserted between <style></style> tags and apply to the entire page
   • 3.3 External styles defined in separate CSS files and linked in the HTML document,

b) Position of the selector within CSS code

If two declarations have the same definition location and the same specificity, the last defined style will be applied.

c) Stacking elements

Stacking multiple elements narrows the selection and thereby increases the overall specificity of the selector. Selector strength is obtained by adding the weights of all individual selectors. Therefore, choosing more weighted elements increases the overall specificity of the selector.

d) Element “weight”

Each element type has its own “weight”; an element is heavier the greater its specificity is.

• HTML tag selector (1 point)
• class, attribute, and pseudo selectors (10 points)
• ID selector (100 points)

NOTE:
The universal selector and child selector have no value in the specificity calculation.

Example:

• p
  has a specificity of 0,0,0,1 (1 HTML selector = 1)
• div p
  has a specificity of 0,0,0,2 (2 HTML selectors=1+1=2)
• .tree
  has a specificity of 0,0,1,0 (1 class selector=10)
• p:first-child
  has a specificity of 0,1,1, (1 pseudo selector + 1 HTML selector=10+1=11)
• div p.tree
  has a specificity of 0,0,1,2 (2 HTML selectors + 1 class selector=1+1+10=12)
• #baobab
  has a specificity of 0,1,0,0 (1 id selector = 100)
• body #content .alternative p
  has a specificity of 0,1,1,2
  (HTML selector + id selector + class selector + HTML selector=1+100+10+1=112)
• Inline CSS element inserted in HTML
  has a specificity of 1,0,0,0 (1 INLINE selector=1000)

Specificity calculator site here