Sebelum kita memulai pembahasan tentang tipe-tipe selector di CSS, mari kita mengenal cara" menulis kode-kode CSS ya teman".
TYPE SELECTOR
'Type Selector' CSS mencocokan elemen dengan nama node. Dengan kata lain,
itu memilih semua elemen dari jenis yang diberikan dalam dokumen.
CSS:
ATTRIBUTE SELECTOR
'Attribute Selector CSS' mencocokkan elemen berdasarkan keberadaan atau
nilai atribut tertentu.
CSS:
/* Semua div dengan atribut 'lang' adalah tebal. */
div[lang] {
font-weight: bold;
}
/* Semua div tanpa atribut `lang` adalah italic. */
div:not([lang]) {
font-style: italic;
}
/* Semua div dalam bahasa english berwarna biru. */
div[lang~="en-us"] {
color: blue;
}
/* Semua div dalam bahasa portugis berwarna hijau. */
div[lang="pt"] {
color: green;
}
/* Semua div dalam bahasa Mandarin berwarna merah. */
div[lang|="zh"] {
color: red;
}
/* Semua div dalam bahasa Mandarin Kuno
`data-lang` berwarna ungu. */
/* Note: kamu bisa menggunakan atribut hyphernated
tanpa tanda kutip */
div[data-lang="zh-TW"] {
color: purple;
}
HTML:
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
="pt" >Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">世界您好!</div>
Hasil:
ID SELECTOR
CSS ID Selector menyamakan elemen dari value atribut ID. Agar elemen tersebut dapat dipilih, atribut id harus sama persis dengan value yang ada di selector nya.
/* Elemen dengan id="demo" */
#demo {
border: red 2px solid;
CSS:
#identified {
background-color: skyblue;
}
HTML:
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
Hasil:
This div has a special ID on it!
CLASS SELECTOR:
Class Selector CSS menyamakan elemen dari kontennya atribut class.
CSS:
HTML:
Child Selector digunakan untuk menyamakan yang darimana adalah anak dari elemen tersebut.
dan
Descendant Selector digunakan untuk menyamakan yang darimana adalah keturunan dari elemen tersebut.
CSS: