590 reads

Helpful CSS Selectors

by Juan Pablo GilApril 12th, 2020

Too Long; Didn't Read

A CSS selector is a set of rules which will allow us to style any HTML element. In CSS there are many different selectors, they will also explain in detail and a descriptive example of each of them. The universal selector is indicated by an asterisk ( * ) In spite of its simplicity, it is not used, since it is difficult for the same style to be applied to all the elements of a page. The descending selectors allow you to increase the accuracy of the type or label selector.

Company Mentioned

Coin Mentioned

A CSS selector is a set of rules which will allow us to style any HTML element. In CSS there are many different selectors, they will also explain in detail and a descriptive example of each of them.

Global or Universal Selector

You could say that this selector is the one that occupies the most people that are starting. Its operation of this selector is to select all the elements that the page will contain.

* { margin : 0; }

The universal selector is indicated by an asterisk ( * ). In spite of its simplicity, it is not used, since it is difficult for the same style to be applied to all the elements of a page. But, it is usually combined with other selectors.

Element Type or label selector

This selector takes all the elements of the page whose HTML tag matches the value of the selector. The following example selects all <h1> of the page:

h1 {
  ...
}

To use this selector, it is only necessary to say the name of an HTML tag (without the characters “

< >

” ) corresponding to the elements to be selected.

The following example applies different styles to the headlines of an HTML page:

h1 {
  font-size: 32px;
}
h2 {
  color: coral ;
}
h3 {
  color: black;
  opacity : 0.8;
}

If you want to apply the same styles to two different elements, you can chain the selectors. In this case, CSS allows you to group all individual rules into a single rule with many selectors. To do this, all selectors separated by a comma (,) are included and the result is that the following CSS rule is equal to the three previous rules:

h2, h3, h4 {
  color: balck ;
  font-weight: Bold ;
  opacity: 0.7;
  font-family: Arial, Helvetica, sans-serif;
}

In complex style sheets, it is common to group the properties of several elements into a single CSS rule, and then define the specific properties of those elements. The following example first establishes the common properties of section titles (color and typeface) and then sets the font size of each of them:

h2 {font -size: 25px ; }
h3 {font -size: 20px ; }
h4 { font -size : 15px ; }

Descending selector

Select the elements found within other elements. An element is descended from another when it is between the opening and closing labels of the other element.

The selector in the following example selects all < span > elements of the page that are within a < nav > element:

<nav>
   <span> txt1 </span>   
   <a href ="...">
     <span> txt2 </span> 
   </ a >
 </nav>

The nav span selector selects txt2. The reason is that, in the descending selector, one element does not have to be a direct descendant of the other. The only condition is that an element must be within another element, regardless of the level of depth it is in.

The rest of the < span > elements of the page that are not within an <nav> element do not apply the above CSS rule.

Descending selectors allow you to increase the accuracy of the type or label selector. This, using the descending selector it is possible to apply different styles to elements of the same type. The following example extends the previous sample color and black and emphasis throughout the text <a> contained within a < span >:

span a {color : black ; text-decoration: none;   }

With the above CSS rules:

The elements
```
< a >
```
found within an element < span > is shown in black and emphasis.
The rest of the items
```
< a >
```
of the page are displayed with the default color applied by the browser.
The descending selectors are always formed by two or more selectors separated from each other by blank spaces.
The last selector indicates the element who the styles are applied and the previous selectors says the place where the element is.

Class selector

If the following sample HTML code is considered:

<body> 
   <h1> Lorem ipsum pain </h1>
   <h1> Lorem ipsum pain </h1>
   <h1> Lorem ipsum pain </h1>
</body>

How can CSS styles be applied only to the first <h1>? The universal selector ( * ) cannot be used because it selects all the elements of the page. The element type or label selector ( h1 ) cannot be used either because it would select all paragraphs. Finally, the descending selector ( body h1 ) cannot be used either because all the paragraphs are in the same place.

One of the simplest solutions to apply styles to a single element it is the "class attribute" on that element to say the CSS rule that should be applied:

<body>
    <h1 class = ”title 1” > Lorem ipsum pain <h1>
    <h1> Lorem ipsum pain </h1>
    <h1> Lorem ipsum pain </h1>
 </ body >

Next, a new rule called “title1” is created in the CSS file with all the styles to be applied to the element. So that the browser does not confuse this selector with the other types of selectors, the value of the " class " attribute is set with a period (.) As shown in the following example:

. title 1 { text-transform : uppercase ; }

The selector. title 1 is interpreted as "any element of the page whose class attribute is equal to title1" so that only the first title meets that condition.

These types of selectors are called class selectors and are the most used together with the ID selectors that will be seen below. The main feature of this selector is that in the same HTML page several different elements can use the same value in the class attribute.

ID Selectors

Sometimes, it is necessary to apply CSS styles to a single element of the page. Although a class selector can be used to apply styles to a single element, there is another more efficient selector in this case.

The ID selector allows you to select an element of the page through the value of its id attribute. This type of selectors only selects one element of the page because the id attribute value cannot be repeated in two different elements of the same page.

The syntax of the ID selectors is very like that of the class selectors, except that the pad

symbol (

) is used instead of the period ( . ) As a prefix of the CSS rule name:

# main-title {text-transform: uppercase; }
<body> 
    <h1 id = " main -title " > Lorem ipsum pain <h1> 
    <h1> Lorem ipsum pain </h1>
    <h1> Lorem ipsum pain </h1>
</body>

In the previous example, the

main-title selector only selects the first

<h1> (whose id attribute is equal to “ main-title ” ).

The main difference between this type of selector and the class selector has to do with HTML and not with CSS. As is known, on the same page, the value of the id attribute must be unique, so that two different elements cannot have the same id value. But, the class attribute is not required to be unique, so many different HTML elements can share the same value for their class attribute.

In this way, the general recommendation is to use the ID selector when you want to apply a style to a single specific element of the page and use the class selector when you want to apply a style to several different elements of the HTML page.