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

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

References

selectedPre-seleziona un elemento di input
<select>Usato per creare un menu a tendina.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<caption>Definisce didascalie all'interno di una tabella
listCollega un elemento input con una lista di opzioni datalist
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

project-freecodecamp.org

Kladdkaka - Ricetta Torta al Ciocc

Notizie dai Monti

5/10/24 es.1 - palindromi

console elements(2)

Meraviglie d\'Italia

Prep. Esame pt.3

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