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

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

Referenze

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<h1>Titolo di intestazione di primo livello
multipleConverte in lista a selezione multipla
<label>Mostrare un testo di etichetta per un elemento di input.
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<link>Collega il documento corrente con una risorsa esterna

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Page not found - Codewith.it

Cascaded-Treemap

VERIFICA RANZI LEONARDO

Basketball Legends

Elaborato esame

attività della settimana

Spotify Profile

Indovna il numero

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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;
}