CSS Selector

Pada materi css syntax disana ada kalimat yang menyebutkan css selector. Pada materi ini kita akan membahas apa itu css selector.

Css selector merupakan suatu cara untuk memanggil element html berdasarkan sebagai berikut :

Selektor sederhana (pilih elemen berdasarkan nama, id, kelas)

Selektor kombinator (memilih elemen berdasarkan hubungan spesifik di antara mereka)

Selektor kelas semu (memilih elemen berdasarkan status tertentu)

Selektor elemen semu (memilih dan menata bagian elemen)

Pemilih atribut (memilih elemen berdasarkan atribut atau nilai atribut)

Lihat kode dibawah ini :

        *{

background: #c3d2e6;

font-family: Arial, sans-serif;

}

h4{

font-size: 27px;

color: #4d8bdb;

}

p{

text-align: center;

color: red;

}

        

#container{

width: 550px;

height: 550px;

background: #6f89ab;

display: flex;

justify-content: center;

}

.box-class{

width: 225px;

height: 225px;

background: #325787;

align-content: center;

}

.box-class p{

color : #ffffff;

background: #00000000;

}

Dalam kode diatas mari kita bahas masing-masing selectornya dibawah ini :

*{

.....

                .....

}

Universal selector css (*) yang mana mengatur keseluruhan semua yang ada pada wesbite. Kita bisa mengatur warna, font, ukuran font, yang jenisnya sama pada website.

h1{

.....

                .....

}

Element selector, css yang mana kita hanya memanggil element html ke css jika kita ingin mengubahnya. Pada contoh diatas kita hanya memanggil element h1 dan p saja.

#container{

.....

                .....

}

Id selector css, yang mana kita memanggil nama id nya dengan didahului karakter (#). Selector ini digunakan ketika sebuah element tertentu dan unik.

.box-class{

.....

                .....

}

Class selector, yang mana kita memanggil class nya dengan didahului karakter (.) titik. Selector ini digunakan untuk memanggil element tertentu. 

h1, h2, p{

.....

                .....

}

Group selector, yang mana ketika kita ingin mengubah beberapa element dengan property dan value yang sama, maka kita bisa menggunakan cara diatas.

Contoh ketika kita ingin mengubah beberapa element dengan property dan value yang sama tanpa menggunakan Group selector.

        h1{

font-size: 29px;

color: #325787;

}

h2{

font-size: 29px;

color: #325787;

}

p{

font-size: 29px;

color: #325787;

}

Jika kita menggunakan group selector maka kita hanya menuliskan h1, h2, p dan masukan property dan valuenya seperti contoh diatas.

Dan terakhir, pada html ada yang namanya input type (text, password, dan number, submit dan lain sebagainya). Ketika kita ingin memangilnya maka selector css nya adalah sebagai berikut : 

input[type=text]{

        ...

        ...

}

Pada titik-titik diatas kita bisa mengatur border, warna border, border radius atau yang lainnya. Dan untuk type=text bisa di sesuaikan dengan type yang anda gunakan.

Itulah selector yang bisa kita pakai untuk memangil element html pada css. Selector ini akan kaiian temukan selama kalian mempelajari css. 

Selamat belajar