CSS Selectors: tag, class, id, universal, pseudo, attribute

We can understand CSS selectors as a rule that will define which HTML elements we will apply the specified style to.

Selectors can represent various characteristics of an HTML element, such as a tag, an id, a class, or an attribute, and can be combined to further specify where to apply formatting.

CSS selector types

tag selectors
class selectors
id selectors
class selector
attribute selectors
universal selectors.

Tag selector

The tag selector is the simplest CSS selector, and to define it, just put the name of the tag where you want to apply the formatting before defining the formatting rules, as in the example:

div{
	background-color:red;
}

This structure will apply formatting to all div tags that exist in your HTML document, without exception.

id selector

In an HTML tag, you can specify an identifier, called an id. A tag can have only one id, and this id cannot be repeated in the rest of the document.

Thus, using a selector by id is very useful when you want to apply formatting to a specific element.

We represent ids in CSS with a #, so a CSS id selector has the syntax #id-name, as you can see in the example:

#content{
background-color:red;
}

The style shown in the example will be applied to the tag that has the content id, no matter which tag it is.

class selector

We define a class in the opening tag of an HTML element just like an id, however, while an id must be unique and represent a single element, a class can represent multiple elements, and an element can have more than one class.

Classes in CSS are identified with a . (period), so a CSS class selector has the syntax .class-name , as you can see in the example:

.content{
	background-color:red;
}

Thus, the formatting defined in this class will be applied to all tags that have this class, whether they are of the same type or not.

attribute selector

We use these types of selectors mainly to perform the formatting of input tags in forms, as we choose the type of an input tag according to the value of the type attribute, such as type=“text”.

An attribute in CSS is identified by being enclosed in square brackets, and an attribute selector has a syntax similar to tag[attribute = "value"], as in the example:

input[type = "text"]{
	background-color: red;
}

I want to point out here that the tag specification is important, as there may be more than one type of tag that has the same attribute.

In addition, the attribute selector syntax has some variations, in addition to this one, and you can check all these variations in the language documentation .

The formatting specified in the example will apply to all input tags that have the type attribute equal to text, no matter where they are located in the code.

universal selector

The * selector is known as a universal selector, as formatting associated with this selector will apply to all HTML elements:

*{
	background-color:red;
}

selector combiners

Despite being very useful, the basic selectors presented so far are often not enough to format your code, so it is possible to combine selectors through combiners.

CSS Combiners are used to specify the relationship between two selectors as in the examples below where we use the p and span tag selectors as examples:

descendant selector

This selector uses space as a combiner between two selectors, as in the example:

p span{
	background-color:red;
}

The style of this example will apply to all span tags that are inside a p tag, even if the span tag is not a direct child of the p tag.

Adjacent sibling selectors

This selector uses the + symbol as a combiner between two selectors, as in the example:

p + span{
	backgrond-color:red;
}

The style of this example will be applied to all span tags that are immediately preceded by a p tag.

General sibling selectors

This selector uses the ~ symbol as a combiner between two selectors, as in the example:

p ~ span{
	background-color:red;
}

The style of this example will be applied to all span tags that are preceded by a p tag within the same parent element.

children selector

This selector uses the > symbol as a combiner between two selectors, as in the example:

p > span{
	background-color:red;
}

The style of this example will only apply to span tags that are direct children of a p tag.

PSEUDO-CLASSES

Pseudo-classes are types of special classes that are not defined by the developer (they are already pre-defined).

The pseudo-class selector is written with the element name + colon + pseudo-class name.

Its biggest use is with links (tags a) to define different styles for when the link is new, visited, etc.

To get started, let's get acquainted with link pseudo-classes:

With the selector a:link, we style only unvisited links, that is, links in their normal state.
With the selector a:visited, we style only visited links, that is, links that have already been clicked.
With the selector a:hover, we style links when the mouse is over them. With this pseudo-class, we can make several interesting effects. This pseudo-class can be applied to any element, not just links, which makes it even more useful.
With the selector a:focus, we style links when we select them with the keyboard, through the Tab key. This pseudo-class is useful for styling links for people who have limited skill and can't use the mouse, for example.
With the selector a:active, we style a link when the mouse is being clicked, or we press Enter, activating the link.

a:link {}
a:visited {}
a:hover {}
a:active {}

Final considerations

The selectors presented in this article are capable of selecting different types of elements, as well as allowing you to format extremely specific elements.