Belajar selectors pada css

belajar css

Kegunaan selector

Pada CSS selector sangat penting, selector digunakan untuk memilih elemen HTML mana yang akan digunakan untuk diberikan style. Anda bisa menentukan selector dengan berbagai cara, seperti: dengan elemen HTML, atribut id, atribut class, universal dan yang lainnya.

Selector dengan elemen HTML

Anda bisa menggunakan selector dengan memilih nama elemen HTML secara langsung untuk memberikan style pada elemen HTML tersebut.

Contoh:

Editor Online
  1. h1 {
  2. background-color: yellow;
  3. color: red;
  4. }
  5. p {
  6. color: blue;
  7. }

Anda akan belajar seputar property color dan background-color lebih dalam pada bab berikutnya.

Selector dengan atribut id

Anda bisa menggunakan selector dengan memilih nama atribut id untuk memberikan style pada elemen HTML yang diberi nama atribut tersebut. Atribut id bersifat single atau tunggal. Nama atribut id bebas asalkan dimulai dengan huruf.

Contoh:

Editor Online
  1. #tunggal {
  2. background-color: green;
  3. color: yellow;
  4. }

Anda akan belajar seputar property color dan background-color lebih dalam pada bab berikutnya.

Selector dengan atribut class

Anda bisa menggunakan selector dengan memilih nama atribut class untuk memberikan style pada elemen HTML yang diberi nama atribut tersebut. Atribut class bersifat kelompok atau lebih dari satu. Nama atribut class bebas asalkan dimulai dengan huruf.

Contoh:

Editor Online
  1. .kelompok {
  2. background-color: black;
  3. color: white;
  4. }

Anda akan belajar seputar property color dan background-color lebih dalam pada bab berikutnya.

Selector dengan universal

Selector universal merupan pemilihan secara global atau umum, yang ditulis sebagai * tanda bintang atau simbol bintang. Selektor ini sering digunakan untuk mengatur margin dan padding menjadi 0 (nol). Dengan tujuan agar setiap elemen mempunyai style margin dan padding menjadi nol, sehingga untuk mengukur layout lebih mudah.

Contoh:

Editor Online
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }

Anda akan belajar seputar property padding dan margin lebih dalam pada bab berikutnya.

Pengelompokan selector

Mungkin Anda pernah beberapa selector dalam CSS mempunyai style yang sama. Anda dapat mengelompokkan selector yang dipilih dengan memisahkannya dengan koma, dengan tujuan untuk meminilkan sebuah code, dan ini juga mencegah Anda mengulangi aturan style yang sama berulang-ulang.

Contoh:

Editor Online
  1. h1 {
  2. background: green;
  3. color: yellow;
  4. }
  5. h2 {
  6. background: blue;
  7. color: yellow;
  8. }
  9. p {
  10. background: black;
  11. color: yellow;
  12. }

Seperti yang Anda lihat pada contoh di atas, aturan style yang sama color: yellow; dibagi oleh pemilih h1, h2 dan p. Jadi, ini dapat dikelompokkan dalam daftar yang dipisahkan koma, seperti contoh dibawah ini:

Contoh:

Editor Online
  1. h1, h2, p {
  2. color: yellow;
  3. }
  4. h1 {
  5. background: green;
  6. }
  7. h2 {
  8. background-color: blue;
  9. }
  10. p {
  11. background-color: black;
  12. }

Anda akan belajar seputar property color dan background-color lebih dalam pada bab berikutnya.

Daftar macam-macam selector

SelectorContohDeskripsi
elemenpMemilih semua elemen html <p>
atribut id#tunggalMemilih semua elemen dengan atribut id=”tunggal”
atribut class.kelompokMemilih semua elemen dengan atribut class=”kelompok”
universal*Memilih semua elemen

Leave a Reply

Your email address will not be published. Required fields are marked *