Dalam membuat layout sebuah halaman web, kadang kita menemukan situasi di mana elemen yang menjadi target bukan sebuah anakan atau elemen berada di luar elemen lain atau elemen berada di luar div.
Jika kita membuat CSS untuk elemen tersebut tidak tepat, maka style yang kita buat tidak akan berpengaruh pada elemen target.
Dan yang saya tahu, ada 2 buah CSS selektor untuk mengenali elemen yang berada di luar elemen lain, yaitu
+ dan ~Cara penggunaannya seperti berikut:
div + h3 {
color: red;
}CSS di atas untuk mengatur tag
h3 yang berada tepat di bawah atau setelah tag div
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>Dan CSS berikut untuk mengatur tag
h3 yang berada di bawah tag div
div ~ h3 {
color: blue;
}
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>Atau untuk mengatur tag
p yang berada di bawah tag div
div ~ p {
color: blue;
}
<div>
<p>My name is Donald Duck.</p>
<p>I have many friends:</p>
</div>
<h3>We are all humans!</h3>
<p>All my friends are great!<br>
But I really like Daisy!!</p>
<p>Ciao bella</p>
<h3>We are all animals!</h3>
<p>My latest discoveries have led me to believe that we are all animals:</p>Semoga bermanfaat.