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

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

References

<map>Inserisce immagini mappa cliccabili in un documento
getDefinisce un metodo di invio di dati al server
<body>Tag primario di un documento HTML
<tbody>Definisce il contenuto principale di una tabella.
<object>Incorpora risorse varie nella pagina web.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Users

Log in to search for users

Explore

Find inspiration

TravelEscape - Esplora il Mondo co

Menu di Pizzeria Rebeka a Modena -

ESERCIZIO 1.1 WEB

Appunti Informatica

GoUp Fitness Opz 2

Esercizio media Prof

Pitone Tutorial -esercizio conclus

Bootstrap List Grid

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