Ditulis oleh: Ditulis pada: 6/30/2018
CSS adalah singkatan dari Cascading Style Sheet yang merupakan salah satu kode pemrograman yang bertujuan untuk memberikan gaya pada tampilan sebuah elemen HTML. Dengan CSS maka kita bisa membuat tampilan dari kode-kode HTML menjadi lebih menarik. Untuk mengatur tampilan ini, maka kita harus tetap menentukan kode-kode pengenal dari elemen yang menjadi targetnya.Umumnya kita memberikan style untuk elemen sesuai dengan identitasnya, biasanya dengan class atau dengan id, atau sesuai dengan tag HTML itu sendiri. Kita akan lebih mudah membuat CSS untuk elemen yang berada di dalam elemen lain seperti div atau lainnya.
Namun bagaimana jika elemen target berada di luar elemen lainnya? Tentu saja ini harus menggunakan CSS yang tepat agar style yang kita buat bisa mengenai elemen yang menjadi targetnya.
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.