CSS - Selector

• Selector digunakan untuk memilih elemen HTML yang akan diberi gaya oleh CSS.
• Analogi nya seperti kita mau mengecat bagian rumah.
• Kita harus mengetahui bagian mana yang akan di cat. Misal pintu, jendela, dinding, atau lantai.
• Jenis selector umum antara lain: tag, class, dan id.
• Class dipanggil dengan tanda titik (.), sedangkan id memakai tanda pagar (#).

Contoh:

/* Selector Tag */
p { 
  color: blue; 
}

/* Selector Class */
.title { 
  font-size: 20px; 
  color: #333;
}

/* Selector ID */
#header { 
  background: #f0f0f0;
  padding: 20px;
}

/* Selector Descendant */
div p {
  margin: 10px 0;
}

/* Selector Child */
ul > li {
  list-style-type: square;
}

/* Pseudo-class */
a:hover {
  color: #ff0000;
  text-decoration: underline;
}

Jenis-jenis Selector Lainnya:

1. Universal Selector

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

2. Attribute Selector

   input[type="text"] {
     border: 1px solid #ccc;
   }

3. Pseudo-elements

   p::first-line {
     font-weight: bold;
   }

4. Multiple Selector

   h1, h2, h3 {
     font-family: 'Arial', sans-serif;
   }

Spesifisitas CSS

• Inline styles (1000)
• ID (100)
• Class, pseudo-class, attribute selectors (10)
• Elements and pseudo-elements (1)