Cara Menggunakan Konsep Combinator pada CSS Part-6

Selektor dapat berisi beberapa penyeleksi sederhana, tetapi di antara setiap pemilih sederhana, harus ada kombinator. Ada beberapa kombinator yang dapat kita gunakan dan masing-masing menggambarkan hubungan antara pemilih

Contoh

Katakanlah kita memiliki HTML ini:

<h1>Chinese language on the web</h1>
<p>The most common text layout on the web is horizontal top-to-bottom, as is the case for Latin-based scripts. However, East Asian scripts like Chinese and Japanese are traditionally laid out vertically, from right-to-left.</p>
<p>This article will explore the history of the Chinese writing system and how to use CSS to lay out text for vertical scripts.</p>
<h2>Table of contents</h2>
<ul>
  <li><a href="#some-background-and-history">Some background and history</a></li>
  <li><a href="#chinese-fonts-offline-and-online">Chinese fonts, offline and online</a></li>
  <li><a href="#laying-out-chinese-fonts">Laying out Chinese fonts on the web</a>
    <ul>
      <li><a href="#basic-terminology">Basic terminology</a>
      </li>
      <li><a href="#writing-mode-property">writing-mode property</a></li>
      <li><a href="#text-orientation-property">text-orientation property</a></li>
      <li><a href="#text-combine-upright-property">text-combine-upright property</a></li>
    </ul>
  </li>
  <li><a href="#wrapping-up">Wrapping up</a></li>
</ul>

 

Kita dapat membuat paragraf pembuka dicetak miring dan sedikit lebih besar dari sisa teks dalam artikel, dengan menggunakan pemilih saudara terdekat sebagai berikut:

h1 + p {
  font-size: 125%;
  font-style: italic;
}

 

Menggunakan kombinasi pemilih umum dan pemilih anak, memungkinkan kita untuk menargetkan hanya item daftar tingkat atas. Aturan ini tidak berlaku untuk item daftar bersarang karena orang tua mereka tidak memiliki saudara kandung sebelumnya.

h2 ~ ul > li {
  margin-bottom: 1em;
}

 

Jika kita hanya ingin item daftar bersarang dicetak miring dan memiliki font serif, aturan berikut akan melakukan tugasnya, karena hanya ul dalam yang akan memiliki ul lain sebagai induknya.

ul ul {
  font-family: serif;
  font-style: italic;
}

DUMET School Author

Leave a Reply

Your email address will not be published. Required fields are marked *