سلکتورها

قدرت CSS در سلکتورهاست.

پایه

p        { }   /* تگ */
.card    { }   /* کلاس */
#header  { }   /* id (یکتا) */
*        { }   /* همه */

بیشتر از class استفاده کن.

ترکیب

nav a        { }  /* نواده */
nav > a      { }  /* فرزند مستقیم */
h2, h3       { }  /* گروهی */
.btn.primary { }  /* هر دو کلاس */

حالت (Pseudo-class)

button:hover    { }
input:focus     { }
li:first-child  { }
li:nth-child(2n){ }  /* زوج */

وراثت و اولویت

بعضی خواص (color, font) از والد به فرزند به‌ارث می‌رسند. وقتی قوانین تداخل دارند، سلکتور خاص‌تر برنده است (id > class > tag). از !important کم استفاده کن.

در پلی‌گراند، :hover و :nth-child را امتحان کن.