Selector-ууд

CSS-д хамгийн эхний ойлгох зүйл бол selector юм. Selector нь "ямар элементэд энэ дүрмийг хэрэглэх вэ?" гэсэн асуултанд хариулдаг. Selector буруу бол дүрэм огт ажиллахгүй.

Element selector

HTML tag-ийн нэрийг шууд бичнэ. Тухайн tag бүхэнд хэрэглэгдэнэ.

/* Бүх h1 гарчгийг цэнхэр болгох */
h1 {
  color: #60a5fa;
}

/* Бүх параграфын фонт хэмжээ */
p {
  font-size: 16px;
}

Class selector (.)

HTML-д class="нэр" attribute-тай элементийг .нэр гэж сонгоно. Нэг class олон элементэд хэрэглэж болно.

/* class="card" бүхэн */
.card {
  background-color: #0f172a;
  border-radius: 8px;
  padding: 16px;
}

/* class="highlight" бүхэн */
.highlight {
  color: #fbbf24;
  font-weight: bold;
}

<div class="card">Нэгдүгээр карт</div>
<div class="card highlight">Онцлох карт</div>

ID selector (#)

HTML-д id="нэр" attribute-тай элементийг #нэр гэж сонгоно. Нэг ID хуудасд ганцхан удаа байна.

/* id="navbar" элемент */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Group selector (,)

Хэд хэдэн selector-ийг нэг дүрмэнд хамруулна:

/* h1, h2, h3 бүгдэд нэг дүрэм */
h1,
h2,
h3 {
  font-family: "Geist Sans", sans-serif;
  color: #f1f5f9;
}

Descendant selector (зай)

Гадна элементийн дотор байх элементийг сонгоно — хэдэн давхар гүн байсан хамаагүй.

/* .card дотор байх бүх p элемент */
.card p {
  color: #94a3b8;
  line-height: 1.6;
}

Child selector (>)

Шууд хүүхэд элементийг л сонгоно — ач, зээ элементийг биш.

/* nav-ийн шууд хүүхэд a элемент */
nav > a {
  color: #f1f5f9;
  text-decoration: none;
}

Adjacent sibling selector (+)

Нэг эцэгтэй, шууд дараа нь байх ах дүү элементийг сонгоно.

/* h2-ийн шууд дараа орсон p */
h2 + p {
  margin-top: 8px;
  color: #94a3b8;
}

General sibling selector (~)

Нэг эцэгтэй, дараа байх бүх ах дүү элементийг сонгоно.

/* h2-ийн дараа орсон бүх p */
h2 ~ p {
  padding-left: 12px;
}

Attribute selector

HTML attribute-ийн утгаар сонгоно:

/* type="email" бүхий input */
input[type="email"] {
  border: 1px solid #38bdf8;
}

/* href нь "https"-ээр эхэлдэг холбоос */
a[href^="https"] {
  color: #4ade80;
}

/* href нь ".pdf"-ээр төгсдөг холбоос */
a[href$=".pdf"] {
  color: #fb923c;
}

Specificity гэж юу вэ?

Нэг элементэд хэд хэдэн дүрэм давхарлах үед specificity тооцоогоор аль нь давамгайлахыг шийднэ:

| Selector | Оноо | | -------------- | ------- | | Inline style | 1-0-0-0 | | ID #id | 0-1-0-0 | | Class .class | 0-0-1-0 | | Element div | 0-0-0-1 |

p {
  color: gray;
} /* 0-0-0-1 */
.text {
  color: white;
} /* 0-0-1-0 — энэ давамгайлна */
#main {
  color: yellow;
} /* 0-1-0-0 — хамгийн давамгайлна */

Specificity-ийн нарийн дүрмийг 23-р хичээлд дэлгэрэнгүй үзнэ.

Дараагийн хичээлд:

Өнгийг зохицуулах бүх арга — hex, rgb(), hsl(), rgba() форматууд болон background-color, background-image, gradient-ийн үндсийг судална.