Penulisan Selektor HTML pada CSS

ul li:hover ul { } kalo sytak seperti ini gimana cara bacanya ? mohon bantuannya

css

@MegaAmbara

1 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

Jawaban Terpilih

Berarti itu pada bagian ul li di hover maka ul nya akan dirubah seperti apa contoh Ul li:hover ul { Background:red; }

Maka apa bila mouse di arahkan ke bagian ul li maka background pada ul akan berubah menjadi merah

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

Dari sintaks "ul li:hover ul", bila dilihat ada tiga komponen selector.

1. ul (paling luar) 2. li:hover 3. ul (paling dalam)

Karena ketiga komponen dipisahkan dengan spasi (" ") maka style akan berpengaruh pada keturunan "ul" (paling dalam) jika "li" yang merupakan keturunan dari "ul" (paling luar) di-hover.

Misal markup html-nya gini:

 <ul>
  <li>
    1. Batagor
    <ul>
      <li>a. Tahu Pangsit</li>
      <li>b. Sambel Kacang</li>
      <li>c. Kecap</li>
      <li>d. Jeruk Nipis</li>
    </ul>
  </li>
  <li>2. Somay</li>
  <li>3. Bakso Malang</li>
</ul>

Terus css-nya kaya kata mas @farisdewantoro:

 ul li:hover ul
{
  background: red;
}

Nanti kalo item batagor di hover sama mouse, isinya (tahu pangsit, sambel kacang, dkk) jadi warna merah. Tapi tulisan batagornya ngga.

@rangerkuning

19 Kontribusi 15 Poin

Dipost 6 tahun yang lalu

tes saja ya maaf

@siffiyan

49 Kontribusi 4 Poin

Dipost 5 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Penulisan Selektor HTML pada CSS

Kelas Premium!
Belajar bikin website dari nol sekarang