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

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

References

<pre>Indica una parte di testo preformattato
<td>Definisce una cella di una tabella HTML.
<em>Formatta il testo in corsivo/italico enfatizzato
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Esercitazione 2

primo esercizio 26 gennaio

Programma per la salute

STILI + IMMAGINI

Inserimento di un\'immagine

Gallery Action Seven

"esercitazione 6.html"

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