Jenis - jenis Selektor di Dalam CSS

• SELEKTOR TAG

Ciri-cirinya :
Nama selektor berupa nama tag.
Contoh :

h1{
font-family : arial;
text-align:center;
background-color:#9900FF;
}

• SELEKTOR PSEUDO-KELAS

Untuk mengatur sebuah atribut dalam suatu tag.
Ciri-cirinya :
Tag : Pseudo_kelas

Contoh :

a:link { color:purple;}
a:hover {
background-color:purple;
color:white;
}
a:visited { color:yellow;}
a:active { color:red;
}

• SELEKTOR KELAS

Ciri-cirinya :

•Selektor kelas diawali dengan tanda titik.
•Selektor kelas bisa diterapkan hanya pada elemen tertentu.
•Sebuah elemen bisa mempunyai lebih dari satu kelas.
•Di dalam atribut class, nama-nama kelas dipisahkan oleh spasi.

Contoh :

.header{
background-color:#0000FF;
color:#FFFFFF;
}
.content{
background-color:#00FF00;
color:#FF0000;
}
.band{
color:#00FFFF;
}
div.band{
background-color:#FFFF00;
}
.teknik{
color:blue;
}
.informatika{
background-color:#FF0000;
}

• SELEKTOR ID

Untuk mengatur elemen yang mempunyai ID tertentu.

Ciri-cirinya :
Selektor ID diawali dengan tanda #

Contoh:

.isi{
background-color:#FF6633;
}
#posisi1{
text-align:right;
color:white;
}
#posisi2{
text-align:left;
color:yellow;
}

• SELEKTOR KETURUNAN

Selektor yang diberlakukan terhadap suatu elemen HTML yang merupakan keturunan dari suatu elemen.

Contoh:

div ul {
list-style-type:square;
color:red;
}

• SELEKTOR ORTU-ANAK

Selektor ortu-anak merupakan kasus khusus dari selektor keturunan.
Contoh :

body p {
background-color:green;
color:white;
}

• SELEKTOR BERSEBELAHAN

Untuk mengatur elemen HTML yang bersebelahan dengan suatu elemen yang lain.

Contoh:

h1+h2{
border-top-style:solid;
}

• SELEKTOR ATRIBUT

Untuk mengatur elemen HTML yang atribut beserta nilainya cocok dengan kriteria dalam selektor.
Contoh :

div[class="color-3"]{
background-color:red;color:white;
}

• SELEKTOR PSEUDO-ELEMEN

Selektor ini disediakan dengan tujuan untuk memberikan efek yang menarik.

Css menyediakan 3 pseudo-elemen yaitu:

1. Pseudo-elemen first-letterberarti karakter pertama.
2. Pseudo-elemen first-lineberarti baris pertama.
3. Pseudo-elemen first-childberarti elemen anak pertama

Contoh first-letter:

p:first-letter{
font-size:500%;
color:blue;
float:left;
}

Contoh first-line :

.kesatu:first-line {
font-variant:small-caps;
font-weight:bold;
}

Contoh first-childp:

first-child{
font-variant:small-caps;
font-weight:bold;
}

• SELEKTOR UNIVERSAL

Selektor yang ditujukan untuk semua elemen.

Contoh :

*{color:red;
}

• PENGGABUNGAN SELEKTOR

Apabila sejumlah selektor mempunyai bagian deklarasi properti yang sama, maka selektor- selektor tersebut bisa disatukan.

Contoh :

h1,h2,h3{
color:blue;
}


Semoga Bermanfaat !!!