OTHER CSS SELECTORS

CSS COMBINATORS SELECTORS

There are four different combinator selectors in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

DESCENDANT SELECTOR

The descendant selector matches all elements that are descendants of a specified element. The figure shows the paragraphs that are the children of a div element. The descendant selector – typically represented by a single space character () – combines two selectors such that elements corresponding to the second selector are selected if they have an ancestor element (parent, parent of parent, parent of parent of parent, etc.) which corresponds to the first selector.

CHILD SELECTOR

The child selector selects all elements that are children of a specified element. In this figure, the blocks with green color are the blocks affected by the child selector. As we can see, there is only the selection of those paragraph elements which are direct children of the div element. The child selector (>) is positioned between two CSS selectors. Matches only those elements that match the second selector that are direct children of the elements that match the first. The lowest descendants in the hierarchy do not match.

ADJACENT SIBLING SELECTOR

The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element and “adjacent” means “follow immediately. In this figure, the blocks with green color are the selected blocks affected after using the adjacent sibling selector. There is paragraph selection which comes immediately after another paragraph element. The adjacent sibling selector having a (+) symbol is placed between two CSS selectors. Matches only those elements that match the second selector which are the next sibling of the first selector.

GENERAL SIBLING SELECTOR

The general sibling selector selects all elements that are successive siblings of a specified element. In this figure, the blocks with green color are the selected blocks affected after using the general sibling selector. If you want to select the siblings of an element even if they are not directly adjacent, you can use this combinator (~).

CSS PSEUDO CLASSES

A pseudo-class is used to define a special state of an element. For example, it can be used for:

Style an element when a user hovers over it with the mouse
Give a different style to visited and unvisited links
Style when an element gets focus

CSS PSEUDO-ELEMENTS

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used for:

Define the style of the first letter, or line, of an element
Insert content before or after an element

CSS ATTRIBUTE SLECTORS

The [attribute] selector is used to select elements with a specific attribute.
[attribute = “value”] is used to select elements with a specified attribute and value.
[attribute ~ = “value”] is used to select elements with an attribute value containing a specified word.
[attribute | = “value”] is used to select elements with the specified attribute from the specified value. Note: the value must be a whole word, alone, like class = “top”, or followed by a hyphen (-), like class = “top-text”!
[attribute ^ = “value”] is used to select elements whose attribute value begins with a specified value. Note: the value does not have to be a whole word!
[attribute $ = “value”] is used to select elements whose attribute value ends with a specified value. Note: the value does not have to be a whole word!
[attribute * = “value”] is used to select elements whose attribute value contains a specified value. Note: the value does not have to be a whole word!

STYLING FORMS

Attribute selectors can be useful for styling modules without a class or ID:

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>SIMPLE SELECTOR</title>
    
</head>
<body>
    <h1 style="color: blue; text-align:center;">CSS COMBINATORS SELECTORS</h1>
    <h2>Descendand Selector (div p)</h2>
    <div class="p1">
        <p>Paragrafo 1 nel DIV.</p>
        <p>Paragrafo 2 nel DIV.</p>
        <section><p>Paragrafo 3 nel DIV annidato in una section.</p></section>
        <h3>INTESTAZIONE TRE NEL DIV</h3>
    </div>
    <p>Paragrafo 4 fuori dal DIV.</p>
    <p>Paragrafo 5 fuori dal DIV.</p>
    <h2>Child Selector (div > p)</h2>
    <div class="p2">
        <p>Paragrafo 1 nel DIV.</p>
        <p>Paragrafo 2 nel DIV.</p>
        <span>
          
          <p>Paragrafo 3 nel DIV. (dentro un elemento span descendant).</p>
        </span>
        <p>Paragrafo 4 nel DIV.</p>
      </div>
      <p>Paragrafo 5 fuori dal DIV.</p>
      <h2>Adjacent Sibling Selector (div + p)</h2>
      <div class="p3">
        <p>Paragrafo 1 nel DIV.</p>
        <p>Paragrafo 2 nel DIV.</p>
      </div>
      <p>Paragrafo 3 fuori dal DIV.</p>
      <p>Paragrafo 4 fuori dal DIV.</p>
      <h2>General Sibling Selector (div ~ p)</h2>
      <div class="p4">
        <p>Paragrafo 1 in nel DIV.</p>
        <p>Paragrafo 2 in nel DIV.</p>
      </div>
      <p>Paragrafo 3 fuori dal DIV.</p>
      <p>Paragrafo 4 fuori dal DIV.</p>
      <h1 style="color: blue; text-align:center;">CSS PSEUDO CLASSES</h1>
      <h2>Anchor Pseudo-classes</h2>
      <a class="microsoft" href="https://microsoft.com">Microsoft</a>
      <h2>Pseudo-classes and HTML Classes</h2>
      <a class="google" href="https://google.com">Google</a>
      <br>
      <br>
      <h2>Hover on div</h2>
      <div class="p5">
           OVER ON ELEMENT DIV
      </div>
      <br>
      <br>
      <h2>CSS - The :first-child Pseudo-class</h2>
      <div>
        <p class="child">Primo figlio</p>
        <p class="child">Secondo figlio</p>
      </div>
      <div>
        <p>Testo di <em> esempio </em>. Testo di<em> esempio </em>.</p>
        <p>Testo di <em> esempio </em>. Testo di<em> esempio </em>.</p>
      </div>
      <h1 style="color: blue; text-align:center;">CSS PSEUDO-ELEMENTS</h1>
      <h2>The ::first-line Pseudo-element</h2>
      <p class="p6">Lorem ipsum dolor sit amet consectetur <br> 
          adipisicing elit. Incidunt est illo rem, sunt quos <br> 
          quae sint illum, assumenda expedita, nostrum dolorem <br> 
          necessitatibus reprehenderit. Nobis officia laudantium <br>
          accusantium quos optio qui!
      </p>
      <h1 class="p7" style="align-items: center;">ESEMPIO DI ::BEFORE E ::AFTER</h1>
      <br>
      <br>
      <h2>CSS - The ::marker Pseudo-element</h2>
      <ol>
          <li>PRIMO</li>
          <li>SECONDO</li>
          <li>TERZO</li>
      </ol>
      <h1 style="color: blue; text-align:center;">CSS ATTRIBUTE SELECTOR</h1>
      <h2>CSS [attribute="value"] Selector</h2>
      <a href="https://www.goole.com">Google</a>
      <a href="https://www.yhaoo.com" target="_blank">Yhaoo</a>
      <a href="https://www.microsoft.com" target="_top">Microsoft</a>
      <br>
      <br>
      <h2>CSS [attribute~="value"] Selector</h2>
      <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20113'%3E%3C/svg%3E" title="klematis flower" width="150" height="113" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/klematis.jpg"><noscript><img decoding="async" src="https://www.marcoalbasini.com/myfolder/img/klematis.jpg" title="klematis flower" width="150" height="113"></noscript>
      <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20224%20162'%3E%3C/svg%3E" title="flower" width="224" height="162" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/img_flwr.gif"><noscript><img decoding="async" src="https://www.marcoalbasini.com/myfolder/img/img_flwr.gif" title="flower" width="224" height="162"></noscript>
      <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20358'%3E%3C/svg%3E" title="tree" width="200" height="358" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/img_tree.gif"><noscript><img decoding="async" src="https://www.marcoalbasini.com/myfolder/img/img_tree.gif" title="tree" width="200" height="358"></noscript>
      <br>
      <br>
      <h2>CSS [attribute|="value"] Selector</h2>
      <h4 class="left-header">Header h4 uno</h4>
      <h4 class="left-text">Header h4 due</h4>
      <h4 class="leftcontent">Header h4 tre</h4> 
      <h2> CSS [attribute^="value"] Selector</h2>
      <h4 class="top-header">Header h4 quattro</h4>
      <h4 class="top-text">Header h4 cinque</h4>
      <h4 class="topcontent">Header h4 sei</h4> 
      <br>
      <h2>CSS [attribute$="value"] Selector</h2>
      <h4 class="bottom-text1">Header h4 sette</h4>
      <h4 class="bottomcontent">Header h4 otto</h4> 
      <br>
      <h2>CSS [attribute*="value"] Selector</h2>
      <h4 class="right-text">Header h4 nove</h4>
      <h4 class="rightcontent">Header h4 dieci</h4> 
      <h2>Styling Forms</h2>
      <input type="button" value="Click me!">
</body>
</html>

Copy to Clipboard

/******************************
/*--CSS COMBINATORS SELECTORS *
/******************************
/*1) DECSDENDAND SELECTOR (SPACE) Il selettore descendand corrisponde a tutti 
     gli elementi che sono discendenti di un elemento specificato. In
     questo esempio per isolare il DIV applico l'attributo class p1*/
div.p1 p{
    background-color: yellow;
    color:black;
    border: 2px solid red;
}
div.p1 h3{
    background-color: yellow;
    color:black;
    border: 2px solid red;
}
/*2)--CHILD SELECTOR (>)*Il selettore child seleziona tutti gli elementi 
      che sono figli di un elemento specificato.In questo esempio per isolare 
      il DIV applicol'attributo class p2*/
div.p2 > p {
    background-color:bisque;
    color:black;
    border: 2px solid sienna;
}
/*3)--ADJACENT SIBLING SELECTOR (+) Il seguente esempio
      seleziona il primo elemento p che viene posizionato immediatamente
      dopo il div. Per isolare il DIV applico l'attributo class p3*/
   div.p3 + p{
    background-color:greenyellow;
    color:black;
    border: 2px solid mediumvioletred;
   }
/*4)GENERAL SIBLING SELECTOR Selector (~) The general sibling selector 
    selects all elements that are next siblings of a specified element.
    Per isolare il DIV applico l'attributo class p4--*/
    div.p4 ~ p {
        background-color:black;
        color:white;
        border: 2px solid red;
    }  
/**********************
/*--CSS PSEUDO CLASSES*
/**********************
     sintassi:
     selector:pseudo-class {
       property: value;
   }
   */
/*--1) ANCHOR PSEUDO-CLASSES Per isolare il tag a applico 
       l'attributo class microsoft*/
/* unvisited link */
a.microsoft:link {
    color: #FF0000;
  }
  
  /* visited link */
  a.microsoft:visited {
    color: #00FF00;
  }
  
  /* mouse over link */
  a.microsoft:hover {
    color: #FF00FF;
  }
  
  /* selected link */
  a.microsoft:active {
    color: #0000FF;
  }
  /*2) PSEUDO CLASSES AND HTML CLASSES Per isolare il tag a applico 
       l'attributo class google*/
  a.google:link {
    color:grey;
    border: 1px solid maroon;
    font-size: xx-large;
  }
  div.p5:hover{
      color: green;
      border: 1px solid black;
      font-size: xx-large;
      text-align: center;
      background-color: yellow;
  }
/*3) FIRST-CHILD La pseudo-classe :first-child corrisponde a un 
     elemento che è il primo figlio di un altro elemento. Per isolare 
     il tag a applico l'attributo class child al paragrafo*/
p.child:first-child{
  color: #0000FF;
  border: 2px solid forestgreen;
  background-color: yellow;
}
/*4) Match all <em> elements in all first child <p> elements*/
p em:first-child {
  color:red;
}
/*5)MATCH THE FIRST <em> ELEMENT IN ALL <p> ELEMENTS--*/
p:first-child em {
  color:red;
}
/*******************
/*--PSEUDO ELEMENTS*
/*******************
  syntax:
  selector::pseudo-element {
      property: value;
}
*/
  p::first-letter {
    color:red;
    font-size: xx-large;
  }
  p::first-line {
    color:brown;
    font-variant:normal;
    font-weight: 700;
  }
/*--PSEUDO-ELEMENTS AND CSS CLASSES al paragrafo avente attributo class
    p6 applico ::first-line*/   
p.p6::first-line{
    color: blue;
    background-color: bisque;
}
p.p6::first-letter{
    color: #FF0000;
    font-size: xx-large;
}
/*--CSS - THE ::BEFORE PSEUDO-ELEMENT Lo pseudo-elemento ::before 
     può essere utilizzato per inserire del contenuto prima del contenuto 
     di un elemento. Per isolare il tag h1 applico l'attributo class p7*/
h1.p7::before {
    content: url(https://www.icegif.com/wp-content/uploads/smile-icegif-1.gif);
  }
  /*--CSS - THE ::AFTER PSEUDO-ELEMENT Lo pseudo-elemento ::after 
     può essere utilizzato per inserire del contenuto dopo il contenuto 
     di un elemento. Per isolare il tag h1 applico l'attributo class p7*/
h1.p7::after {
    content: url(https://www.icegif.com/wp-content/uploads/smile-icegif-1.gif);
  }
  /*--CSS - THE ::MARKER PSEUDO-ELEMENT Lo pseudo-element ::marker seleziona i marker 
      degli elementi della lista.*/
  ::marker{
      color: red;
  }
  /*--CSS - THE ::SELECTION PSEUDO-ELEMENT Lo pseudo-elemento ::selection 
      corrisponde alla porzione di un elemento selezionata da un utente.*/
  ::selection {
    color: blue;
    background: yellow;
  }
/**************************  
/*--CSS ATTRIBUTE SLECTORS*
/**************************
   1)Il selettore [attribute="value"] viene utilizzato per 
   selezionare elementi con un attributo e un valore specificati.*/
  a[target="_blank"] {
    background-color: yellow;
  }
  /*2)Il selettore [attribute~="value"] viene utilizzato per 
    selezionare elementi con un valore di attributo contenente una 
    parola specificata..*/
    [title~="flower"] {
      border: 5px solid blue;
    }
    /*3)Il selettore [attribute|="value"] viene utilizzato per selezionare 
        elementi con l'attributo specificato a partire dal valore specificato.*/
    [class|="left"] {
      background: #00ff37;
    }
    /*4)Il selettore [attribute^="value"] viene utilizzato per 
        selezionare elementi il cui valore di attributo inizia 
        con un valore specificato.*/
    [class^="top"] {
        background:#FF00FF;
    }  
    /*5)Il selettore [attribute$="value"] viene utilizzato per selezionare 
        elementi il cui valore di attributo termina con un valore specificato.*/ 
    [class$="text1"]
    {
      background-color:green ;
    }
    /*6)Il selettore [attribute*="value"] viene utilizzato per selezionare elementi il 
        cui valore di attributo contiene un valore specificato.*/
    [class*="ghtcontent"]
    {
      background-color: red;
    }
    /*--STYLING FORMS*/
    input[type="button"] {
      width: 120px;
      margin-left: 35px;
      border: 2 px solid grey;
    }

CSS :nth-child() Selector

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.

Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.

Copy to Clipboard

CSS :nth-last-child() Selector

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.

Tip: Look at the :nth-last-of-type() selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*--Il selettore :nth-last-child(n) corrisponde a ogni elemento 
    che è l'ennesimo figlio, indipendentemente dal tipo, 
    del suo genitore, contando dall'ultimo figlio.
    n può essere un numero, una parola chiave o una formula.
    Suggerimento: guarda il selettore :nth-last-of-type() per 
    selezionare l'elemento che è l'ennesimo figlio, di un tipo 
    specificato, del suo genitore, contando dall'ultimo figlio.*/
    p:nth-last-child(odd) {
        background: red;
    }
    p:nth-last-child(even) {
        background: blue;
    }
    p:nth-last-child(2) {
        background:yellow;
    }
    /*--Usando una formula (an + b). a rappresenta una dimensione del ciclo, 
        n è un contatore (inizia da 0) e b è un valore di offset.
        Qui, specifichiamo un colore di sfondo per tutti gli elementi tr 
        il cui indice è un multiplo di 2, contando dall'ultimo figlio:*/
    tr:nth-last-child(2n+0) {
            background:grey;
    }
    tr:nth-last-child(2n+0):hover {
            background:goldenrod
    }
    table {
            border: 3px solid red;
            background-color:bisque
    }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Ea tempore dicta illo veritatis asperiores, consectetur doloribus enim 
        aperiam, accusamus impedit id maiores. Eius dolore cupiditate 
        laborum eos sit soluta beatae.
    </p>
    <p>Recusandae excepturi ipsum placeat, optio, sed repudiandae veniam 
        cumque exercitationem ullam reprehenderit ab sapiente hic? Id, 
        rem assumenda atque sequi magni est sint blanditiis dolores 
        molestias quas earum veritatis mollitia!
    </p>
    <p>Animi neque sapiente magni commodi dolor ratione quo reprehenderit 
        rem quisquam possimus nobis, beatae veniam quaerat aliquam enim 
        quod odio expedita, distinctio sit! Aspernatur molestias inventore 
        velit consequuntur odio quia.
    </p>
    <p>Animi neque sapiente magni commodi dolor ratione quo reprehenderit 
        rem quisquam possimus nobis, beatae veniam quaerat aliquam enim 
        quod odio expedita, distinctio sit! Aspernatur molestias inventore 
        velit consequuntur odio quia.
    </p>
    <p>Animi neque sapiente magni commodi dolor ratione quo 
        reprehenderit rem quisquam possimus nobis, beatae veniam quaerat aliquam enim 
        quod odio expedita, distinctio sit! Aspernatur molestias inventore 
        velit consequuntur odio quia.
    </p>
    <p>Animi neque sapiente magni commodi dolor ratione quo reprehenderit 
        rem quisquam possimus nobis, beatae veniam quaerat aliquam enim 
        quod odio expedita, distinctio sit! Aspernatur molestias inventore 
        velit consequuntur odio quia.
    </p>
    <table>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
          <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
          <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
      </table>
</body>
</html>

CSS :nth-last-of-type() Selector

The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.

Tip: Look at the :nth-last-child() selector to select the element that is the nth child, regardless of type, of its parent, counting from the last child.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
/*--Il selettore :nth-last-of-type(n) corrisponde a ogni elemento che è 
    l'ennesimo figlio, di un tipo particolare, del suo genitore, contando 
    dall'ultimo figlio.
    n può essere un numero, una parola chiave o una formula.
    Suggerimento: guarda il selettore :nth-last-child() 
    per selezionare l'elemento che è l'ennesimo figlio, 
    indipendentemente dal tipo, del suo genitore, contando 
    dall'ultimo figlio.*/
    p:nth-last-of-type(2) {
        background: red;
    }
    p:nth-last-of-type(3n+0) {
        background: yellow;
    }
    tr:nth-last-of-type(odd) {
        background-color: brown;
    }
    tr:nth-last-of-type(even) {
        background:green;
    }
    table {
        border: 3px solid red;
        background-color:bisque
      }
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
        Aliquam, autem quam. Voluptatem eaque voluptatibus accusamus 
        consectetur exercitationem iusto mollitia totam eius quibusdam 
        autem consequatur maxime dolores suscipit, explicabo sed a.
    </p>
    <p>Praesentium voluptatum quia maxime ea, nihil illum dolores 
        voluptas natus sapiente, ut autem cupiditate ipsum omnis, 
        nam dolore beatae harum nostrum laudantium aut libero. 
        Iure dolor quae hic voluptate natus?
    </p>
    <p>Nemo ipsam ratione odio! Blanditiis tempora 
        consequuntur sunt, excepturi repudiandae quaerat 
        aut enim molestias possimus cumque labore incidunt 
        dignissimos itaque nisi dolores aliquam vel, quibusdam 
        iste delectus commodi! Sint, voluptate!
    </p>
    <p>Consectetur consequuntur, placeat nobis quod sint deserunt 
        repellat voluptatem optio repudiandae explicabo? Doloribus commodi 
        fugit suscipit rem numquam reiciendis alias beatae 
        mollitia iusto quam? Culpa repellat a ducimus ipsum vel.
    </p>
    <table>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
          <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
          <tr>
            <td>
               COLONNA UNO
            </td>
            <td>
               COLONNA DUE
            </td>
            <td>
               COLONNA TRE
            </td>
            <td>
               COLONNA QUATTRO
            </td>
          </tr>
      </table>
</body>
</html>

CSS :nth-of-type() Selector

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. n can be a number, a keyword, or a formula.

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
/*--Il selettore :nth-of-type(n) corrisponde a ogni elemento che è 
    l'ennesimo figlio, di un tipo particolare, del suo genitore.
    n può essere un numero, una parola chiave o una formula.
    Suggerimento: guarda il selettore :nth-child() per selezionare 
    l'elemento che è l'ennesimo figlio, indipendentemente dal tipo, 
    del suo genitore*/
    p:nth-of-type(odd) {
        background: red;
      }
      
      p:nth-of-type(even) {
        background: blue;
      }
      tr:nth-of-type(2n+0) {
        background:grey;
      }
      tr:nth-of-type(2n+0):hover {
        background-color: yellowgreen;
      }
      table {
        border: 3px solid red;
        background-color:bisque
      }
</style>
</head>
<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Perspiciatis voluptatibus, incidunt odit modi ducimus soluta doloribus 
       veniam voluptates nostrum. Cumque saepe fuga at! Doloribus similique 
       praesentium neque quia alias nemo.
    </p>
   <p>Eligendi voluptate natus quod rerum molestiae, quo, 
       nam doloremque sunt eum enim libero animi illo, cum voluptas 
       temporibus saepe non obcaecati sed. Deserunt in dicta provident 
       esse numquam, unde maiores.
    </p>
   <p>Asperiores corporis animi veritatis et natus rerum dolorem amet 
       deserunt voluptatum perspiciatis. Error vero vitae, cupiditate 
       in maiores impedit praesentium commodi sit quae repellat excepturi 
       earum veniam, quia perspiciatis provident.
    </p>
   <p>Reiciendis, debitis perferendis atque voluptas maxime cumque laudantium nemo, 
       aut perspiciatis dignissimos ullam error voluptatem reprehenderit. 
       Voluptatibus tenetur in illo non ex, sed officia ducimus illum, sint 
       pariatur qui fuga?
    </p>
    <table>
      <tr>
        <td>
           COLONNA UNO
        </td>
        <td>
           COLONNA DUE
        </td>
        <td>
           COLONNA TRE
        </td>
        <td>
           COLONNA QUATTRO
        </td>
      </tr>
      <tr>
        <td>
           COLONNA UNO
        </td>
        <td>
           COLONNA DUE
        </td>
        <td>
           COLONNA TRE
        </td>
        <td>
           COLONNA QUATTRO
        </td>
      </tr>
      <tr>
        <td>
           COLONNA UNO
        </td>
        <td>
           COLONNA DUE
        </td>
        <td>
           COLONNA TRE
        </td>
        <td>
           COLONNA QUATTRO
        </td>
      </tr>
      <tr>
        <td>
           COLONNA UNO
        </td>
        <td>
           COLONNA DUE
        </td>
        <td>
           COLONNA TRE
        </td>
        <td>
           COLONNA QUATTRO
        </td>
      </tr>
      <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
        <tr>
          <td>
             COLONNA UNO
          </td>
          <td>
             COLONNA DUE
          </td>
          <td>
             COLONNA TRE
          </td>
          <td>
             COLONNA QUATTRO
          </td>
        </tr>
    </table>
</body>
</html>

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB

CSS COMBINATORS SELECTORS

DESCENDANT SELECTOR

CHILD SELECTOR

ADJACENT SIBLING SELECTOR

GENERAL SIBLING SELECTOR

CSS PSEUDO CLASSES

CSS PSEUDO-ELEMENTS

CSS ATTRIBUTE SLECTORS

STYLING FORMS

CSS :nth-child() Selector

CSS :nth-last-child() Selector

CSS :nth-last-of-type() Selector

CSS :nth-of-type() Selector

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

CSS SELECTORS