ALTRI SELETTORI CSS

CSS COMBINATORS SELECTORS

Ci sono quattro diversi combinators selectors nei CSS:

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

DESCENDANT SELECTOR

Il descendant selector corrisponde a tutti gli elementi che sono discendenti di un elemento specificato. La figura mostra i paragrafi che sono i figli di un elemento div. Il descendant selector – tipicamente rappresentato da un singolo carattere spazio ( ) – combina due selettori in modo tale che gli elementi corrispondenti al secondo selettore siano selezionati se hanno un elemento antenato (genitore, genitore del genitore, genitore del genitore del genitore, ecc.) che corrisponde al primo selettore.

CHILD SELECTOR

Il child selector seleziona tutti gli elementi che sono figli di un elemento specificato. In questa figura, i blocchi con il colore verde sono i blocchi interessati dal child selector. Come possiamo vedere, c’è solo la selezione di quegli elementi di paragrafo che sono i figli diretti dell’elemento div. Il child selector ( >) è posizionato tra due selettori CSS. Corrisponde solo a quegli elementi che corrispondono al secondo selettore che sono i figli diretti degli elementi che corrispondono al primo. Gli elementi discendenti più in basso nella gerarchia non corrispondono.

ADJACENT SIBLING SELECTOR

Il selettore adjacent sibling viene utilizzato per selezionare un elemento che si trova direttamente dopo un altro elemento specifico. Gli elementi di pari livello devono avere lo stesso elemento genitore e “adiacente” significa “seguire immediatamente. In questa figura, i blocchi con il colore verde sono i blocchi selezionati interessati dopo aver utilizzato il selettore adjacent sibling. C’è la selezione dei paragrafi che viene immediatamente dopo un altro elemento di paragrafo. Il selettore adjacent sibling (pari livello adiacente) avente simbolo ( +) è posizionato tra due selettori CSS. Corrisponde solo a quegli elementi che corrispondono al secondo selettore che sono l’elemento fratello successivo del primo selettore.

GENERAL SIBLING SELECTOR

Il general sibling selector seleziona tutti gli elementi che sono fratelli successivi di un elemento specificato. In questa figura, i blocchi con il colore verde sono i blocchi selezionati interessati dopo aver utilizzato il selettore general sibling. Se vuoi selezionare i fratelli di un elemento anche se non sono direttamente adiacenti, puoi usare questo combinatore ( ~).

CSS PSEUDO CLASSES

Una pseudo-class viene utilizzata per definire uno stato speciale di un elemento. Ad esempio, può essere utilizzata per:

Dare uno stile a un elemento quando un utente ci passa sopra con il mouse
Dare uno stile diverso ai link visitati e non visitati
Dare uno stile quando un elemento ottiene il focus

CSS PSEUDO-ELEMENTS

Uno pseudo-element CSS viene utilizzato per definire lo stile di parti specificate di un elemento.

Ad esempio, può essere utilizzato per:

Definire lo stile della prima lettera, o linea, di un elemento
Inserire contenuto prima o dopo un elemento

CSS ATTRIBUTE SLECTORS

Il selettore [attribute] viene utilizzato per selezionare elementi con un attributo specifico.
[attribute=”value”] viene utilizzato per selezionare elementi con un attributo e un valore specificati.
[attribute~=”value”] viene utilizzato per selezionare elementi con un valore di attributo contenente una parola specificata.
[attribute|=”value”] viene utilizzato per selezionare elementi con l’attributo specificato a partire dal valore specificato. Nota: il valore deve essere una parola intera, da sola, come class=”top”, o seguita da un trattino (-), come class=”top-text”!
[attribute^=”value”] viene utilizzato per selezionare elementi il cui valore di attributo inizia con un valore specificato. Nota: il valore non deve essere una parola intera!
[attribute$=”value”] viene utilizzato per selezionare elementi il cui valore di attributo termina con un valore specificato. Nota: il valore non deve essere una parola intera!
[attribute*=”value”] viene utilizzato per selezionare elementi il cui valore di attributo contiene un valore specificato. Nota: il valore non deve essere una parola intera!

STYLING FORMS

I selettori di attributo possono essere utili per definire lo stile dei moduli senza classe o 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

Il selettore :nth-child(n) corrisponde a ogni elemento che è l’ennesimo figlio, indipendentemente dal tipo, del suo genitore. n può essere un numero, una parola chiave o una formula. Suggerimento: guarda il selettore :nth-of-type() per selezionare l’elemento che è l’ennesimo figlio, di un tipo particolare, del suo genitore.

Copy to Clipboard

CSS :nth-last-child() Selector

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.

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

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.

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

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.

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>

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU 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

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

ALTRI SELETTORI CSS