Selector Not dan Lang pada CSS

28/10/2019    Risman Hakim    72     Website

Selector Not dan Lang pada CSS - Masih tentang pembahasan CSS yaitu selector kali ini saya akan melanjutkan selector lain yang bisa kita manfaatkan untuk melakukan styling terhadapa elemen yang dipilih. Selector yang akan saya bahas kali ini adalah selector Not dan Lang.

  • Not adalah selector yang bisa kita gunakan untuk menandai elemen yang tidak ingin kita pilih atau tidak ingin dikenai style.
  • Lang adalah selector yang bisa kita gunakan untuk memilih elemen dengan menentukan attribut (lang) terlebih dahulu pada tag yang dipilih atau yang ingin dikenai style.

1. Kode Selector Not

:not(selector) {
    style CSS;
}

2. Kode Selector Lang

:lang(valuelang) {
    style CSS;
}

Selanjutnya bagaiamana cara penggunaan dari selector Not dan Lang ? berikut akan saya praktekan dari masing - masing selector. Silahkan kalian bisa buat file index.html kemudian ketikan kode HTML dan CSS berikut ini.

<head>
    <meta charset="UTF-8">
    <title>Selector CSS Not dan Lang</title>
    <style>
        h3 {
            color: blue;
        }
        /* Selector not */
        :not(h3) {
            color: red;
        }
        /* Selector lang */
        :lang(bg-yellow) {
            background: black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>DUMET School</h3>
    <small>DUMET School adalah tempat Kursus</small>
    <p lang="bg-yellow">DUMET School membuka cabang pertamanya pada tahun 2013. Sampai dengan tahun 2018 ini, DUMET School memiliki 5 cabang yang berlokasi di: </p>
    <ol>
        <li>Kelapa Gading</li>
        <li>Grogol</li>
        <li>Tebet</li>
        <li>Srengseng</li>
        <li>Depok</li>
    </ol>
</body>

Selanjutnya simpan filenya kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Dari kode diatas telah diaplikasikan selector Not dan Lang dimana tag h3 yang tidak dikenai style CSS karena telah di set not. Kemudian selector lang telah ditentukan juga pada tag p yang diberikan style pada CSS yaitu background dan padding.

Bagaiamana, Bisa dipahami yah... ? cukup mudah penggunaannya silahkan teman - teman juga bisa mengaplikasikan selector pada tiap elemen yang ingin kita pilih. Simak juga pembahasan selector CSS lainnya yaitu Selector Selection dan Placeholder pada CSS. Sekian pembahasan selector CSS kali ini, selamat mencoba...

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More