Menü schliessen
Created: April 12th 2021
Last updated: July 14th 2023
Categories: Common Web Development
Author: Tim Fürer

CSS Basics: Selectors

Tags:  CSS,  CSS Basics,  guide,  HTML
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Selectors, in CSS, are what come before the curly brackets. We've already taken a look at the most fundamental selectors 'element name, id and class' in the first guide. But, there's a lot more to know about selectors. After all, they're one of the most important parts of CSS.

So, let's take a deeper look at some important selectors and how they work.

Universal CSS Element Selector (*)

This selector basically tells CSS to apply this rule to every element, regardless of their name. It's called by writing an asterisk. Note that this selector is also effected by the Descendant Selector which is explained below.

Example:

This effects all elements inside your HTML document:

*
{
	property: value;
}

Descendant Selector

With the Descendant Selector, we can narrow down the search even further. After a selector, make a space and add another selector. This selector is only applied on the elements which fit the selectors that come before.

Example:

This only effects 'element's inside elements which have the specified class assigned to them:

.class element
{
	property: value;
}

And Selector

The And Selector allows you to check if an element fits multiple selectors descriptions. Similar to the Descendant Selector, but not the same. Simply write all the classes you want to check for, together.

Examples:

This affects all elements which have both 'class1' and 'class2' assigned to them:

.class1.class2
{
	property: value;
}

or

This effects all 'element's with this class assigned to them:

element.class
{
	property: value;
}

Grouping Selector (,)

This is useful to save space and increase readability. Say you have to apply the same property multiple times. Instead of making multiple CSS rules, just make one that applies its properties to all desired elements. Separate each group of selectors by a comma like shown in the example below.

Example:

Without grouping:

element1
{
	property: value;
}
.class element2
{
	property: value;
}
element3.class
{
	property: value;
}

With grouping:

element1,
.class element2,
element3.class
{
	property: value;
}

Pseudo-Class Selector (:)

These activate when certain conditions are met. Add a colon after the previous selector and write the Pseudo-Class's name. For example, ':hover' would be a common Pseudo-Class, which only takes effect when the cursor is hovering above the element.

Example:

element:pseudo-class
{
	property: value;
}

More about Pseudo-Classes here.

Pseudo-Element Selector (::)

With Pseudo-Elements, you can define which parts of an element are affected by the properties. Add two colons after the previous selector and write the Pseudo-Element's name. A quite common one would be '::first-letter', which tells CSS to only style the first letter of an element's content.

Example:

element::pseudo-element
{
	property: value;
}

More about Pseudo-Elements here.

Attribute Selector ([])

The square brackets are used to select by an element's attributes. They are placed after the previous selector. An equals can also be used to define a set value for the attribute as a condition.

Examples:

element[attribute]
{
	property: value;
}

or

element[attribute="value"]
{
	property: value;
}

There is more to the Attribute Selectors, read here.

Related Stuff

Everything about CSS Selectors can be read about here.