Apa sing Selector Aplikasi CSS?

Struktur saka sawijining dokumen HTML meh padha karo wit kulawarga. Ing kulawarga sampeyan, sampeyan duwe tuwane lan wong liya sing teka sadurunge sampeyan. Iki minangka leluhurmu. Anak-anak lan wong-wong sing teka sawise sampeyan ana ing wit kasebut yaiku keturunanmu. HTML dianggo kanthi cara sing padha. Unsur sing ana ing njero unsur liya yaiku keturunane. Contone, amarga saklawasé saben unsur HTML ana ing tag , padha dadi keturunan unsur . Hubungan iki penting kanggo mangerteni yen sampeyan miwiti nggarap CSS lan kudu nemtokake unsur-unsur tartamtu kanggo nggunakake gaya visual.

CSS Selecters Descendant

A selector keturunan CSS ditrapake kanggo unsur sing ana ing sajrone unsur liyane (utawa luwih akurat nyatakake, sawijining unsur sing dadi keturunan unsur liyane). Contone, dhaftar tanpa urutan nduweni label karo tag minangka keturunan. Ayo nggunakake HTML ing ngisor iki minangka conto:

• iki pranala

  Tag LI yaiku keturunan saka tag UL. Tag A keturunan saka keturunan LI (anak keturunan) lan UL (keturunan putu). Yen sampeyan mikir babagan ngenani babagan iki nggunakake conto wit keluarga,

  bakal dadi induk,
  • dadi anak unsur kasebut, lan bakal dadi anak saka
  • lan cucu ing
    .

    Dadi, carane sampeyan nemtokake elemen tartamtu ing kaca web nggunakake pemilih katurunan iki? Kaping pisanan, sampeyan kudu netepake penganut keturunan kanthi nggunakake rong tipe (utawa luwih) pemisah dipisahake karo spasi.

    li a {text-decoration: none; }

    Contone, gaya bakal mung ditrapake menyang elemen link () sing keturunan unsur dhaptar item (

    • ). Kabeh pranala liyane ing kaca sing ora keturunan saka item dhaptar bakal ora njaluk gaya iki.

      Siji bab penting sing kudu dielingake yaiku yen ora ketompo carane akeh tag kasebut ing antarane label sing sampeyan gunakake ing selector keturunan. Yen unsur kapindho sing ditutupi ing ngendi wae ing unsur pisanan bakal dipilih minangka keturunan.

      Yen sampeyan pengin milih kabeh jangkar sing keturunan saka unsur, sampeyan bakal nulis:

      ul a {text-decoration: none; }

      Saiki, gaya iki bakal diterapake ing pranala sing keturunan saka item dhaptar. Sampeyan uga bisa nulis pemilih iki

      ul li a {text-decoration: none; }

      Iki minangka selector keturunan sing nggunakake luwih saka rong tipe seleksi. Ing kasus iki, iki bakal ditrapake kanggo pranala sing ana ing dhaptar item lan uga ing dhaptar tanpa dhaptar.

      Nggunakake Pemilih Kelas lan Pemilih ID

      Pemilih sing sampeyan mudhun ora kudu ngetik keturunan. Contone, mbayangno sampeyan duwe area situs (kaya divisi) kanthi atribut ID "papan reklame". Sampeyan bisa ngeset seleksi keturunan saka ID kasebut:

      #billboard ul {background-color: #ccc; }

      Iki bakal nggolongake dhaftar tanpa urutan sing dadi keturunan sawijining unsur kanthi ID saka "billboard". Sampeyan bisa nindakake padha kanggo nilai kelas.

      div.billboard ul {background-color: #ccc; }

      Iki nganggep divisi duweni nilai kelas "billboard". CSS ing ndhuwur bakal nggolongake elemen

      ing sajrone divisi sing nduweni nilai kelas kasebut.

      Sampeyan bisa njaluk abot banget lan nyerahke karo pemilih keturunan. Contone, yen sampeyan nggunakake Dreamweaver kanggo nulis kode HTML sampeyan, ana setelan nalika sampeyan nambah aturan CSS anyar sing bakal nggawe otomatis pemilih adhedhasar kothak kursor ing kaca kasebut. Apa Dreamweaver ing kasus iki nggawe pemilih katurunan sing akeh banget lan keturunan. Spesifikasi tartamtu sing ora perlu kanggo CSS bisa digunakake. Apa sampeyan pengin nggawe keseimbangane antarane pemilih katurunan sing cukup spesifik supaya sampeyan bisa ngebor unsur-unsur sing tepat sampeyan (tanpa gaya sing sampeyan ora pengin mangaruhi) tanpa kudu nganggo aturan CSS sing wis milih gedhe.