roadmap.az

Menyu

HTML & CSSDərs 5 / 16

Təkmilləşdirilmiş selektorlar

Bir üslubu paylaşmaq

class bir neçə elementə eyni rolu verməyə imkan verir. CSS-də sinif adı nöqtə ilə başlayır. Bir element boşluqla ayrılmış bir neçə sinif daşıya bilər. ID isə sənəddə unikal olmalıdır.

<article class="post">
  <p class="lead important">Giriş abzası</p>
  <p>Adi abzas</p>
  <a href="/about/">Davamını oxu</a>
</article>
Nümunə
.lead { font-size: 1.25rem; }
.important { font-weight: 700; }
.post > p { line-height: 1.7; }
.post a:hover { text-decoration-thickness: 3px; }
.post a:focus-visible { outline: 3px solid navy; outline-offset: 4px; }
.post p:first-child { margin-top: 0; }
Nümunə

Seçim və prioritet

.post p bütün içəridəki abzasları, .post > p yalnız birbaşa övladları seçir. p, a iki qrupu birlikdə seçir; .lead.important isə hər iki sinfi daşıyan elementi seçir. Psevdosinif ayrıca HTML sinfi deyil, vəziyyət və ya struktur şərtidir.

Kaskadda qaydanın mənşəyi, vacibliyi, təbəqəsi və spesifikliyi rol oynayır; eyni səviyyədə son gələn qayda üstün ola bilər. !important ilə hər problemi örtmə. DevTools-da üstün gələn qaydanı tap və mümkün qədər sadə selektor saxla.

Əlavə qeydlər və mənbələr

Sinif selektorları eyni üslubu bir neçə elementə tətbiq edir. Birləşmiş selektorlarla müəyyən kontekstdəki elementləri seç, psevdosiniflərlə hover və focus kimi vəziyyətlərə cavab ver.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

Bu mövzuda

  • Siniflər və bir neçə sinif
  • İç-içə və birləşmiş selektorlar
  • Psevdosiniflər və qayda prioriteti

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi
Addım 1 / 3

Seçilən elementləri gör

Selektoru dəyiş. Sonda yalnız birbaşa övlad abzasları seç.

Hədəf: Birbaşa övlad abzasları seç.

Birbaşa övlad

İçəridəki övlad

Qeyd

Seçilən element: 0

.sample p { outline: 2px solid; }

Özün sına

Bir məqalədə giriş abzasını siniflə fərqləndir. Keçidlərin hover və focus-visible vəziyyətlərini klaviatura ilə də yoxla.

Nəticəni necə yoxlayım?

Sinif, daxilolma və birbaşa övlad selektorlarının fərqini göstərir, hover ilə yanaşı klaviatura fokusunu da üslublandırırsan.

Gözlənilən nəticə

  • Yalnız intro sinifli abzas iri və qalın görünür.
  • Tab ilə keçidə çatanda fokus çərçivəsi görünür.
Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Sinif yalnız giriş abzasını seçir. Keçidlərin həm hover, həm də klaviatura fokusunda görünən vəziyyəti var.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<article><h1>CSS selektorları</h1><p class="intro">Bu, məqalənin girişidir.</p><p>Bu isə adi abzasdır.</p><a href="#son">Davamını oxu</a><p id="son">Məqalənin sonu.</p></article>
</body>
</html>

styles.css

body{font:16px/1.7 Arial,sans-serif}.intro{font-size:20px;font-weight:700}a{color:#214e80}a:hover{text-decoration-thickness:3px}a:focus-visible{outline:3px solid #214e80;outline-offset:4px}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.