Css Untuk Elemen Yang Berada Di Luar Elemen Lain

Dalam menciptakan layout sebuah halaman web, kadang kita menemukan situasi di mana elemen yang menjadi sasaran bukan sebuah anakan atau elemen berada di luar elemen lain atau elemen berada di luar div.

Jika kita menciptakan CSS untuk elemen tersebut tidak tepat, maka style yang kita buat tidak akan kuat pada elemen target.

Dan yang aku tahu, ada 2 buah CSS selektor untuk mengenali elemen yang berada di luar elemen lain, yakni + dan

Cara penggunaannya menyerupai berikut:

 div + h3 {
   color: red;
 }

CSS di atas untuk mengatur tag h3 yang berada tepat di bawah atau sehabis 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.

Share this post