Selectors

The selectors are used to identify the elements to which it will apply the format defined in the list of statements

There are different types of selectors that can be used to define CSS rules

Let's describe them from the most general to the most specific (from the point of view from lowest to highest priority)

Universal Selector

It is set to * and applies to all elements of the page:

* {
    margin: 0;
    font-family: Verdana;
}

The example has configured the margins and font of the text, which are usually some of the most commonly used rules

Tag Selector HTML

Indicates the style to be applied to an element or a specified tag

Its there's more than one, they'll be separated by commas

h1, h2, h3, h4, h5 {
    font-size: large;
}

In the example, labels 1 to 5 of the title have been set, applying the font of the large text

As can be seen, we can do without < and > the label

Class Selector

Some HTML elements have the attribute class that indicates the classes to which the element belongs

This attribute allows us to treat that element "class" in a specific way, both in css style application and in its behavior programmatically with JavaScript

To apply the class selector, we'll use tag.class

.headboard{
    color: blue;
}

In the example, we have configured the text in blue color for all the elements of the header class, because if we do not specify a label, the universal selector *

h1.headboard{
    text-aling: center;
}

In the example you have set the text alignment centered only for the elements of the class header, which belong to the title tag <h1>

We must take special care not to leave spaces between the label, the point and the name of the class, since that space is significant, as we will see later

Selector id

Some HTML elements have the id attribute that indicates that this unique identifier it belongs to that particular element

To apply the identifier selector, we'll use tag#id

As with classes, it is very important to use the spaces

p#outstanding{
    background-color: yellow;
}

The example has set the background color of the text to yellow, in that paragraph that has the featured identifier

Selectors, descendant, and adjacent

These selectors allow you to select elements that are contained within other according to the structure of the DOM tree

This is where spaces take importance, because if we separate two selectors with a space, then we will be applying the rule to all descendants of the first selector

section p{
    text-font: Verdana;
}

In the example you have set the text font as Verdana for all the elements <p> that they are descendants of the element <section> (remember that they can be descendants of any level, since that rule will be inherited)

Can be mixed interchangeably selectors descendants of a class or id

section .error{
    color: red;
}

In the example, we have configured the text color as red for any element of the class error that is a descendant of the element

If instead of applying it to all descendants we want it to only apply to direct descendants (children), then we will use the >

section>p{
    text-font: Verdana;
}

In the example, we have configured the font of the text as Verdana only for the items <p> that are children of the element <section>

We can also select the sibling elements, that is, those that appear right after other elements, then we will use the symbol +

h1 + p{
    text-indent: 1.5em;
}

In the example, we have configured the indentation of the first paragraph that appears just after the title tag <h1>

Selectors of attributes

These selectors are used to select elements based on their attributes

There are four types:

1. [attribute]: elements that have an attribute named attribute, regardless of its value
2. [attribute=value]: elements that have an attribute named attribute with the specified value
3. [attribute^=value]: elements that have an attribute named attribute and whose value starts with the specified value
4. [attribute$=value]: elements that have an attribute named attribute and whose value ends with the specified value

a {
    color: red;
}

a[href^https] {
    color: blue;
}

In the example, we have set up a link that we want in a different color if it leads to a url with secure HTTP

Pseudo-classes

There are selectors special to specify elements that have certain properties

They are classes virtual, because they are not specified in HTML, but represent the positions or states in which an item can be found while viewing in the browser

ul li:first-child {
    color: green;
}

The example has been configured to apply only if an item is the first child of its parent, for this we have used the first-child pseudoclass, only the first element <li> from a bullet list (<ul>) will appear in green

There are other pseudoclasses that will help us select a specific brother from among the children of an element:

• :nth-child(n) : represents the n-th brother

  It allows you to include a more complex form such as:

  • :nth-child(even) : that represents the children who occupy positions pairs
  • :nth-child(odd) : that represents the children that occupy odd positions

  (for example to make odd rows in a table have different background color and have a hebrew effect on a table)

• :nth-last-child(n) : similar to the previous one, but starting to count from the end

There are also dynamic pseudoclasses, which indicate the status of items when the user interacts with them:

• :hover : is used to set the style when the user mouses over the element
• :active : is used to set the style when the user click on the item or keep the mouse button pressed over it
• :focus : is used to set the style when the element has focus

Pseudoclasses related to links are also very typical:

• a:link : sets the style of the link when it has not yet visited or when the user has not already pressed
• a:hover : set the style when the user places the mouse over the link element
• a:active : set the style when the user clicks the link
• a:visited : set the style when the user has already visited

a:link {
    color: green;
    text-decoration: none;
}
a:visited {
    color: red;
}
a:hover {
    color: blue;
}

The example has set the status of unvisited, visited or mouse-based links

When using this CSS, the links in the document will appear un underlined and green

By placing the mouse over them they will stop at blue and, once visited, they will turn red

Example of Selectors in action

In the following example has included an HTML page and several of the selectors explained above

You can check the result by viewing it yourself in your browser and if you don't use a CSS reset, you might have different results in other browsers

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Example page</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/exampleSelectors.css" />
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <header>
             Example of Selectors in action <span> in this case CSS3</span>
        </header>
        <nav>
            <a href="index.html">Home</a>
            <a href="info.html">Information</a>
            <a href="login.html">Access</a>
        </nav>
        <div id="index">
            <article>
                <p>The technologies most used in the front-end are:</p>
                <ul class="blinded">
                   <li>HTML5</li> 
                   <li>CSS</li>
                   <li>JavaScript</li>
                   <li>Jquery</li>
                </ul>
            </article>
            <aside>Sidebar</aside>
        </div>
        <footer>This is the footer</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732186554&k=253a5f5fdc1fca5b8c52ddb2e3a605be&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Now we show the contents of the exampleSelectors.css file

* {
    margin: 0;
    font-family: Verdana;
}

header {
    height: 10%;
    bacground-color: lightblue;
    font-size: 30px;
}

header>span {
    font-size: 20px;
    color: grey;
    margin-left: 20px;
}

nav {
   background-color: lightgray;
   padding: 5 px;
}

nav a {
    margin-left: 15px;
    padding: 5px;
    background-color: white;
}

nav a:first-child {
    background-color: darkgray;
}

a {
   text-decoration: none;
   color: blue;
}

a:visited {
    color: lightblue;
}

a:hover {
   background-color: beige;
}

a[href^=https] {
   font-style: italic;
}

#index {
   display: flex;
   align-items: stretch;
}

article {
   width: 80%;
   bacground-color: lemonchiffon;
   min-height: 80%;
}

ul.blinded {
   list-style-type: none;
   width: 100%;
   text-align: center;
}

ul.blinded>li:nth-child(odd) {
   background-color: beige;
}

aside {
   width: 20%;
   bacground-color: lightsalmon;
   min-height: 80%;
}

footer {
   bacground-color: lightgreen;
   height: 5%;
}