Selektor dan cascade

Jika dua aturan memberi elemen yang sama warna berbeda, CSS tidak menebak. CSS membandingkan selektornya, dan satu id mengalahkan berapa pun banyaknya class.

Memilih elemen

Selektor adalah pola yang mencocokkan elemen di halaman. Yang paling sederhana mencocokkan berdasarkan nama elemen, class, atau id. p adalah selektor tipe dan cocok dengan setiap paragraf. .note adalah selektor class dan cocok dengan setiap elemen yang punya class="note"; satu elemen bisa punya beberapa class yang dipisahkan spasi, dan satu class bisa dipakai di banyak elemen. #intro adalah selektor id dan cocok dengan satu-satunya elemen yang punya id="intro". *, selektor universal, cocok dengan semuanya.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Menggabungkan selektor

Koma mengelompokkan selektor yang memakai deklarasi yang sama, jadi h1, h2 menata keduanya. Spasi adalah kombinator turunan: nav a cocok dengan tautan di mana saja di dalam nav, sedalam apa pun. > lebih ketat dan hanya cocok dengan anak langsung. Menulis dua selektor sederhana berdempetan tanpa spasi, seperti a.active, berarti satu elemen harus cocok dengan keduanya: tautan yang juga punya class active. Selektor atribut dalam kurung siku mencocokkan berdasarkan atribut, misalnya input[type="email"].

Pseudo-class, yang ditulis dengan satu titik dua, memilih elemen dalam keadaan atau posisi tertentu: :hover saat penunjuk berada di atasnya, :focus-visible saat elemen mendapat fokus keyboard, :first-child saat elemen menjadi anak pertama induknya. Pseudo-element, yang ditulis dengan dua titik dua, menata sebagian elemen, misalnya ::first-line atau ::placeholder.

Saat aturan bertentangan

Sering kali beberapa aturan mengatur properti yang sama pada elemen yang sama. Cascade, huruf C dalam CSS, menentukan mana yang menang. Selain gaya bawaan browser dan !important, dua pertanyaan menyelesaikan hampir semua kasus. Pertama, selektor mana yang lebih spesifik? Spesifisitas dihitung sebagai tiga angka: id, lalu class (termasuk selektor atribut dan pseudo-class), lalu nama elemen. #menu a bernilai 1-0-1, .active bernilai 0-1-0, dan nav a bernilai 0-0-2. Angka-angka itu dibandingkan dari kiri, jadi satu id mengalahkan berapa pun banyaknya class. Kedua, jika spesifisitasnya sama, aturan yang muncul belakangan di stylesheet yang menang.

Atribut style inline mengalahkan selektor apa pun, dan deklarasi bertanda !important mengalahkan deklarasi biasa. Keduanya menggoda sebagai perbaikan cepat, tetapi membuat perubahan berikutnya lebih sulit, karena satu-satunya cara menimpanya adalah dengan lebih banyak hal yang sama. Kebanyakan tim menjaga spesifisitas tetap rendah dan setara, sebagian besar menata dengan class, sehingga urutan di file sudah cukup untuk memperkirakan hasilnya.

Pewarisan

Sebagian properti diturunkan dari induk ke anak secara otomatis. Atur color atau font-family pada body, maka setiap paragraf, daftar, dan sel tabel di dalamnya ikut memakainya, kecuali ada aturan yang mengatur nilainya sendiri. Properti yang berkaitan dengan teks umumnya diwariskan; properti yang berkaitan dengan kotak seperti width, padding, border, dan margin tidak, itulah sebabnya border pada section tidak muncul di sekeliling setiap paragraf di dalamnya. Kata kunci inherit memaksa properti menyalin nilai induknya.

Beri nama class berdasarkan apa sesuatu itu, bukan bagaimana tampilannya. .warning tetap masuk akal saat desainer mengganti warnanya dari merah ke oranye; .red-text tidak. Id itu unik, jadi sebaiknya disimpan untuk target tautan dan label formulir, bukan untuk menata gaya, sehingga spesifisitas tetap rendah.