Esercio-selettori-di-relazione by @Peppe74 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<body>Tag primario di un documento HTML
<abbr>Inserisce abbreviazioni e acronimi
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<aside>Definisce un contenuto separato dal testo perincipale
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Users

Log in to search for users

Explore

Find inspiration

Programma per la salute

Mova AI Generico

mappa del malandrino

Quiz ristrutturazione

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">

<head>
  <title>Esercio su selettori di relazione</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <div class="box1">
      box1
      <p>Sono il primo paragrafo, figlio del div con classe box1</p>
      <div class="box1-div">Sono un div, figlio del div con classe box1</div>
      <p>Sono il secondo paragrafo, figlio del div con classe box1</p>
      <p>Sono il terzo paragrafo, figlio del div con classe box1</p>
    </div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">
      box5
      <p>Sono il primo paragrafo, figlio del div con classe box5</p>
      <p>Sono il secondo paragrafo, figlio del div con classe box5.
        Al mio interno includo questo <span>elemento span</span>,
        figlio di questo paragrafo, nipote del div con
        classe box5 e pronipote del div con classe container.
      </p>
      <p>Sono il terzo paragrafo, figlio del div con classe box5</p>
      <div>Sono il primo div, figlio del div con classe box5</div>
      <p>Sono il quarto paragrafo, figlio del div con classe box5</p>
      <div>Sono il secondo div, figlio del div con classe box5</div>
      <div>Sono il terzo div, figlio del div con classe box5</div>
    </div>
  </div>
</body>

</html>

.container {
  margin: 0;
  padding: 5px;
}

div {
  padding: 5px;
  color: white;
}

div p {
  margin-top: 1px;
  margin-bottom: 1px;
  color: yellow;
}

.box1 {
  background-color: green;
}

.box2 {
  background-color: #bcbcbc;
}

.box3 {
  background-color: #6fa8dc;
}

.box4 {
  background-color: #ffad60;
}

.box5 {
  background-color: #ffc2cd;
}

.box1~div {
  border: 3px solid red;
}

.box1>p {
  background-color: rgba(155, 186, 190);
}

/*
  Applica la proprietá specificata dalla seguente regola
  ai div che sono preceduti da e sono fratelli de 
  l'elemento con classe .box3
*/
.box3+div {
  text-decoration: underline black dotted;
}

/*
  Applica le proprietá specificate a ciascun elemento 
  span figlio di un elemento paragrafo, che é 
  discendente dell'elemento con classe .box5
*/
.box5 p>span {
  color: green;
  border: 1px solid green;
  font-weight: bold;
}

/*
  Applica le proprietá specificate al secondo figlio 
  dell'elemento con classe .box5
*/
.box5> :nth-child(2) {
  color: #6fa8dc;
}

/*
  Nessun effetto sará applicato all'elemento paragrafo, 
  che é fratello adiacente del terzo figlio 
  dell'elemento con classe .box5 (un div) perché questo 
  elemento non é un p ma un div
*/
.box5> :nth-child(3)+p {
  text-decoration: underline;
}

/*
  Applica la proprietá specificata (linea sulla scritta) 
  all'elemento div che é fratello adiacente del terzo 
  figlio dell'elemento con classe .box5
*/
.box5> :nth-child(3)+div {
  text-decoration: line-through;
}

/*
  Applica le proprietá specificate all'ultimo figlio 
  dell'elemento con classe .box5
*/
.box5> :last-child {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}

/*
  Applica le proprietá specificate quando si produce 
  l'effetto hover su un div figlio dell'elemento con 
  classe .box5
*/
.box5 > div:hover {
  cursor: pointer;
  background-color: blueviolet;
}