CSS Selectors

Type Selector

Widely used method to select every element on your page that is the type:

Selects all the paragraph elements.

The Class Selector

Selects all the objects that has that specific class name:

Result = All divs that have the "box" class name, will get affected by style.

The ID Selector

IDs are used to explicitly set different names for elements, but in CSS, if the objects have the same ID name, they both will get deigned:

If you were to work with JavaScript, the ID method wont work if you wanted to select all elements that have the same name - querySelectorAll with "class" attributes only works in that case.

The Universal Selector (*)

Used to select all the elements inside a page:

You can make an experiment - remove the "* {}" selector completely in the style place and see what happens. This is overall a method used to create sites that have no padding or margin, so the whole page stays nicely in the browser's frame.

Descendant Selector

Heres how you can select descendant objects inside parent elements:

The bottom paragraph element won't get styled, because the element descendant selector is used here - targets the "container" div's elements.

Child Selector (>)

To select only child components of a parent element but not nested elements, that's why this mark exists:

We use the same class for both divs inside the "parent" classed div and only the first "child" div gets styled, because the other one is nested - the ">" selector only selects its first scope child elements, not nested ones.

Adjacent Sibling Selector

The way to select an element's sibling object is by using the "+" selector:

The last paragraph object will not get affected by the selector, only the first paragraph.

The "General Sibling Selector"

Function looking like this "~", is used to select all the element's siblings, which is similar to the adjacent sibling selector. But instead, this one selects all the objects:

This way you can select all the elements besides the object.

Attribute Selector

Already discussed in the "Modern Selectors" page, this is used to select specific type of inputs:

All the specific type of inputs would be styled if you were to target them using this method.

The '::before' Selector

This is the way to add something before the element:

The magnifying glass emoji appears before the button's text.

The '::after' Selector

The way to add something inside after the element's content:

Adding text inside the "notifciation-badge" div breaks it - the text appears out of the box, because its a typical behaviour of using the "::after" selector on a div.

'::first-line' Selector

Experimental function used to indicate when the text breaks into a new line due to the screen width's limit:

If it happens you are on the widest screen ever, open developer tools and resize the page's view - see some of the text get the default values.

'::first-letter' Selector

To make the first letter different from others in an element, you might want to use this selector:

Its simple - only the first letter gets styled, just like says "::first-letter".

':first-child' Selector

Used to select the first object inside it's parent element:

Make sure you are targeting the descendant object and let it be inside a parent element, else it won't work.

':last-child' Selector

Just like the ':first-child' function, but this one just selects the last child of it's parent element:

Always selects the last object and all of it's descendants what's inside it in a parent element.

The ':nth-child' Selector

This is when you want to select a specific element from a queue:

You can also use "odd", "even" and "2n+1" - you can replace the 2 and 1 with your numbers.

The ':nth-last-child' Selector

This function starts counting from the end of a list in a parent element:

That way you can start counting from the bottom for a list.

The ':only-child' Selector

Selects parent elements that have only one child element:

Never chooses elements that have more than 1 child in them.

':empty' Selector

Chooses parent elements that have no childs, whitespaces or text in them at all:

Good for some kind of game websites.

':not' Selector

Used to let out specified objects. Parent element is not essential:

First select a target element and specify it with an id or class to exclude it and the other elements will be styled.

The '::selection' Function

When highlighting an element by drawing a box with cursor or twice clicking it, this '::selection' selector would activate:

Here every element turns yellow backgrounded when selected, since we are not specifying any element in front of the "::selection" selector. Its also equal to the universal mark '*', which selects everything.