Chapterبەش 4 · Lectureوانە 4.2

CSS Selectors, Pseudo-classes and Pseudo-elementsهەڵبژێرەکانی CSS، نیمچەکلاسەکان و نیمچەتوخمەکان

Type, class, ID and universal selectors, selector lists, class versus id, descendant and child combinators, attribute selectors, the link pseudo-classes in LVHA order, :focus, :first-child and :nth-child, pseudo-elements such as ::first-letter and ::before, and the specificity of each kind of selector.

جۆر، کلاس، ID و گشتی، لیستی ، کلاس بەرامبەر id، پەیوەستکەری نەوە و منداڵ، ، بە ڕیزبەندیی LVHA، :focus، :⁦first-child⁩ و :⁦nth-child⁩، وەک ::⁦first-letter⁩ و ::before، هەروەها هەر جۆرێکی .

18 min read18 خولەک خوێندنەوە · 20 stepsهەنگاو

What you will learnچی فێر دەبیت

Write type, class, ID, universal and grouped selectors, and choose a class or an id correctly.
Select elements by their place with the descendant and child combinators, and by their attributes.
Style link states in LVHA order, keep keyboard focus visible, and use :first-child and :nth-child.
Style parts of elements with pseudo-elements and work out the specificity of a selector.

جۆر، کلاس، ID، گشتی و کۆکراوە بنووسیت و بە دروستی کلاس یان id هەڵبژێریت.
بەپێی شوێنیان بە پەیوەستکەری نەوە و منداڵ و بەپێی هەڵبژێریت.
دۆخەکانی بە ڕیزبەندیی LVHA بڕازێنیتەوە، focusـی دیار بهێڵیتەوە و :⁦first-child⁩ و :⁦nth-child⁩ بەکاربهێنیت.
بەشەکانی بە بڕازێنیتەوە و دیاری بکەیت.

What a selector doesهەڵبژێر چی دەکات

The is the first part of a rule. It names the HTML elements that the rule styles: "all paragraphs", "everything with the class note", "the links inside the navigation bar". The better you know selectors, the less you need extra classes and ids in your HTML.

بەشی یەکەمی ڕێسایەکە. ناوی ئەو دەبات کە ڕێساکە دەیانڕازێنێتەوە: «هەموو بڕگەکان»، «هەموو شتێک بە کلاسی note»، «ئەو لەناو شریتی ڕێنیشاندەردان». هەتا باشتر بناسیت، پێویستیت بە کلاس و idـی زیادە لە کەمتر دەبێت.

Each selector picks some elements of the page tree.هەر هەندێک لە داری لاپەڕەکە هەڵدەبژێرێت.CêIT

More than "five types"زیاتر لە «پێنج جۆر»

The lecture lists five types of selector: universal, group, type, class and ID. Two things to know: a "group" (h1, h2, h3) is not a kind of selector but a selector list, several selectors sharing one rule; and CSS has many more ways to select, which the lecture shows later too: attribute selectors, pseudo-classes, pseudo-elements and combinators such as the space in .navbar ul li a.

وانەکە پێنج جۆر دەژمێرێت: گشتی، گروپ، جۆر، کلاس و ID. دوو شت بزانە: «گروپ» (h1, h2, h3) جۆرێک نییە، بەڵکو لیستێک لە ـە، واتە چەند کە یەک ڕێسا بەکار دەهێنن؛ هەروەها ڕێگەی زۆر زیاتری هەیە بۆ هەڵبژاردن کە وانەکەش دواتر پیشانیان دەدات: ، ، و پەیوەستکەرەکان وەک ناو .navbar ul li a.

What a selector doesهەڵبژێر چی دەکات

Type selectorsهەڵبژێری جۆر

A type selector (element selector) is just the element name. Its declarations apply to every element of that type on the page.

جۆر تەنها ناوی . لەسەر هەموو لەو جۆرە لە لاپەڕەکەدا جێبەجێ دەبن.

Every h3 is italic Courier Newهەموو ⁦h3⁩ـێک ⁦Courier New⁩ـی لارەtype.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Type selector</title>
  <style>
    h3 {
      font-family: "Courier New", monospace;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Planets</h1>
  <h3>Mercury</h3>
  <p>The planet closest to the Sun.</p>
  <h3>Venus</h3>
  <p>The hottest planet.</p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Type selector</title>
  <style>
    h3 {
      font-family: "Courier New", monospace;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Planets</h1>
  <h3>Mercury</h3>
  <p>The planet closest to the Sun.</p>
  <h3>Venus</h3>
  <p>The hottest planet.</p>
</body>
</html>

What a selector doesهەڵبژێر چی دەکات

Class selectorsهەڵبژێرەکانی کلاس

A is a dot followed by a class name: .planets. It matches every element whose class attribute contains that name, whatever the element type. One class can be used on many elements, and one element can have several classes, separated by spaces: class="planets big". To limit a class to one element type, join them with no space: p.planets.

خاڵێکە و دوای ئەو ناوی کلاسێک: .planets. هەموو ئەو دەگرێتەوە کە classـیان ئەو ناوەی تێدایە، جۆری هەرچییەک بێت. یەک کلاس دەتوانێت لەسەر زۆر بەکاربێت و یەک دەتوانێت چەند کلاسێکی هەبێت کە بە جیا دەکرێنەوە: class="planets big". بۆ سنووردارکردنی کلاسێک بە یەک جۆری ، بەبێ بیانلکێنە: p.planets.

One class, two elements; one element, two classesیەک کلاس، دوو توخم؛ یەک توخم، دوو کلاسclass.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Class selector</title>
  <style>
    .planets { font-size: 1.5em; }
    .big     { color: #b4530f; }
  </style>
</head>
<body>
  <h1>The solar system</h1>
  <p class="planets">Mercury, Venus, Earth and Mars are rocky planets.</p>
  <p>The Sun is a star, not a planet.</p>
  <p class="planets big">Jupiter and Saturn are gas giants.</p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Class selector</title>
  <style>
    .planets { font-size: 1.5em; }
    .big     { color: #b4530f; }
  </style>
</head>
<body>
  <h1>The solar system</h1>
  <p class="planets">Mercury, Venus, Earth and Mars are rocky planets.</p>
  <p>The Sun is a star, not a planet.</p>
  <p class="planets big">Jupiter and Saturn are gas giants.</p>
</body>
</html>

What a selector doesهەڵبژێر چی دەکات

ID selectorsهەڵبژێرەکانی ID

An is # followed by an id: #E001. It matches the element whose id attribute has exactly that value. An id is a unique name: one page may contain each id only once, so an ID selector styles one element.

بریتییە لە # و دوای ئەو idـێک: #E001. ئەو دەگرێتەوە کە idـەکەی ڕێک ئەو هەیە. id ناوێکی تاکـە: لاپەڕەیەک دەتوانێت هەر idـێک تەنها یەک جار لەخۆ بگرێت، بۆیە یەک دەڕازێنێتەوە.

One id, one elementیەک id، یەک توخمstaff.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ID selector</title>
  <style>
    #E001 { font-size: 2em; }
  </style>
</head>
<body>
  <h1>Staff list</h1>
  <p id="E001">Aram — head of department</p>
  <p id="E002">Shilan — web design teacher</p>
  <p id="E003">Karwan — network teacher</p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ID selector</title>
  <style>
    #E001 { font-size: 2em; }
  </style>
</head>
<body>
  <h1>Staff list</h1>
  <p id="E001">Aram — head of department</p>
  <p id="E002">Shilan — web design teacher</p>
  <p id="E003">Karwan — network teacher</p>
</body>
</html>

An id styles one elementid یەک توخم دەڕازێنێتەوە

The slide says the ID selector applies styles "to the content of all those elements" with that id. But an id must be unique in a page: if you give two elements the same id, the page is invalid, links to #E001 and JavaScript find only the first one, and the styling "works" only by accident. Use a class when several elements share a style. Remember too that an id has a much higher than a class (Specificity), which makes it hard to override.

سلایدەکە دەڵێت شێواز لەسەر «ناوەڕۆکی هەموو ئەو » جێبەجێ دەکات کە ئەو idـەیان هەیە. بەڵام id دەبێت لە لاپەڕەیەکدا تاک بێت: ئەگەر هەمان id بدەیتە دوو ، لاپەڕەکە نادروست دەبێت، بۆ #E001 و تەنها یەکەمیان دەدۆزنەوە و ڕازاندنەوەکە تەنها بە ڕێکەوت «کار دەکات». کاتێک چەند یەک شێوازیان هەیە کلاس بەکاربهێنە. هەروەها لەبیرت بێت کە id لە کلاس زۆر بەرزترە (وردیی هەڵبژێر)، کە گۆڕینی قورس دەکات.

What a selector doesهەڵبژێر چی دەکات

The universal selectorهەڵبژێری گشتی

The universal selector * matches every element of the page. The lecture uses it to give the whole document one font stack. It is also used to reset browser defaults, for example * { margin: 0; }. Use it with care: it really styles everything.

گشتی * هەموو لاپەڕەکە دەگرێتەوە. وانەکە بەکاری دەهێنێت بۆ ئەوەی یەک ڕیزی بداتە هەموو بەڵگەنامەکە. هەروەها بۆ سڕینەوەی شێوازە بنەڕەتییەکانی بەکاردێت، بۆ نموونە * { margin: 0; }. بە ئاگاییەوە بەکاری بهێنە: بە ڕاستی هەموو شتێک دەڕازێنێتەوە.

One font for every elementیەک فۆنت بۆ هەموو توخمێکuniversal.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Universal selector</title>
  <style>
    * {
      font-family: Verdana, Calibri, sans-serif;
    }
  </style>
</head>
<body>
  <h1>One font everywhere</h1>
  <p>Every element on this page uses the same font stack.</p>
  <ul><li>Headings</li><li>Paragraphs</li><li>Lists</li></ul>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Universal selector</title>
  <style>
    * {
      font-family: Verdana, Calibri, sans-serif;
    }
  </style>
</head>
<body>
  <h1>One font everywhere</h1>
  <p>Every element on this page uses the same font stack.</p>
  <ul><li>Headings</li><li>Paragraphs</li><li>Lists</li></ul>
</body>
</html>

What a selector doesهەڵبژێر چی دەکات

Selector lists (grouping)لیستی هەڵبژێرەکان (کۆکردنەوە)

When several selectors need the same declarations, write them once, separated by commas: h1, h2, h3 { color: maroon; }. This is a selector list: the rule applies to every element that matches any selector in the list. You can group selectors with one declaration or with several, and the same element may appear in several groups.

کاتێک چەند هەمان پێویستە، یەک جار بیاننووسە و بە کۆما جیایان بکەرەوە: h1, h2, h3 { color: maroon; }. ئەمە لیستێک لە ـە: ڕێساکە لەسەر هەموو ئەو جێبەجێ دەبێت کە لەگەڵ هەر لە لیستەکەدا دەگونجێن. دەتوانیت بە یەک یان بە چەندین کۆ بکەیتەوە و هەمان دەتوانێت لە چەند گروپێکدا بێت.

Three groupsسێ گروپgroups.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Selector list</title>
  <style>
    h1, h2, h3 { color: maroon; }
    h1, h3     { font-family: "Times New Roman", serif; }
    p, h2      { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>Main title</h1>
  <h2>Section title</h2>
  <h3>Small title</h3>
  <p>Normal text.</p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Selector list</title>
  <style>
    h1, h2, h3 { color: maroon; }
    h1, h3     { font-family: "Times New Roman", serif; }
    p, h2      { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>Main title</h1>
  <h2>Section title</h2>
  <h3>Small title</h3>
  <p>Normal text.</p>
</body>
</html>

Correctionڕاستکردنەوە

The slides write H1, H3, H4 {font-family: Times New Roman} and P, BODY {color: blue; font-family: Arial}. A font name with spaces should be in quotes, and every font stack should end with a generic family: font-family: "Times New Roman", serif;. One more rule: if one selector in a list is invalid (for example h1, ..note), the browser drops the whole rule.

سلایدەکان H1, H3, H4 {font-family: Times New Roman} و P, BODY {color: blue; font-family: Arial} دەنووسن. ناوی کە تێدایە دەبێت لەناو بێت و هەموو ڕیزێکی دەبێت بە خێزانێکی گشتی کۆتایی بێت: font-family: "Times New Roman", serif;. یاسایەکی تر: ئەگەر یەک لە لیستێکدا نادروست بێت (بۆ نموونە h1, ..note)، هەموو ڕێساکە فڕێ دەدات.

Class or id?کلاس یان id؟

Exam: compare class and ID selectorsتاقیکردنەوە: و بەراورد بکە
Compareبەراورد	Class selector	ID selector
Written asشێوەی نووسین	`.warning`	`#site-title`
In the HTMLلە	`class="warning"`	`id="site-title"`
How many elementsچەند	Many; an element can have several classesزۆر؛ دەتوانێت چەند کلاسێکی هەبێت	One: unique in the pageیەک: لە لاپەڕەکەدا تاکە
Specificity	0-1-0	1-0-0 (much stronger)⁦1-0-0⁩ (زۆر بەهێزتر)
Other usesبەکارهێنانی تر	Groups for JavaScriptگروپ بۆ	Link targets (`#site-title`), `<label for>`, JavaScriptشوێنی مەبەستی (`#site-title`)، `<label for>`،
Use it forبۆ چی بەکاری بهێنە	Almost all stylingنزیکەی هەموو ڕازاندنەوەیەک	Naming one element; style with it rarelyناونانی یەک ؛ بە دەگمەن شێوازی پێ بدە

An id also gives an element a name that other parts of the web use: a link to page.html#site-title jumps to it, a <label for="…"> points at the form field with that id (name, id and for), and JavaScript finds it with getElementById. For styling, prefer classes: they can be reused and they are easy to override.

id هەروەها ناوێک دەداتە کە بەشەکانی تری وێب بەکاری دەهێنن: بۆ page.html#site-title باز دەداتە سەری، <label for="…"> ئاماژە بەو خانەی دەکات کە ئەو idـەی هەیە (name، id و for) و بە getElementById دەیدۆزێتەوە. بۆ ڕازاندنەوە، کلاس باشترە: دووبارە بەکاردێتەوە و گۆڕینی ئاسانە.

Exam: "What is the difference between an ID and a class selector? Explain with an example."تاقیکردنەوە: «جیاوازیی نێوان هەڵبژێری ID و هەڵبژێری کلاس چییە؟ بە نموونە ڕوونی بکەرەوە.»

Model answer: a class selector starts with a dot (.note { color: gray; }) and styles every element with class="note"; many elements can share it. An ID selector starts with # (#header { height: 80px; }) and styles the one element with id="header", because an id must be unique in the page. An ID selector is more specific, so it wins over a class when both set the same property.

وەڵامی نموونەیی: بە خاڵێک دەست پێدەکات (.note { color: gray; }) و هەموو ئەو دەڕازێنێتەوە کە class="note"یان هەیە؛ زۆر دەتوانن بەکاری بهێنن. بە # دەست پێدەکات (#header { height: 80px; }) و ئەو یەک دەڕازێنێتەوە کە id="header"ی هەیە، چونکە id دەبێت لە لاپەڕەکەدا تاک بێت. وردترە، بۆیە کاتێک هەردووکیان هەمان دادەنێن لە کلاس دەباتەوە.

Quick checkپشکنینی خێراFive product cards on a page should all get a grey border. What do you use?پێنج کارتی بەرهەم لە لاپەڕەیەکدا هەموویان دەبێت خۆڵەمێشی وەربگرن. چی بەکار دەهێنیت؟A class, class="card" and .card { … }کلاسێک، class="card" و .card { … }Five different ids and five rulesپێنج idـی جیاواز و پێنج ڕێساAn inline style on each cardشێوازێکی ناو توخم لەسەر هەر کارتێکThe same id on all five cardsهەمان id لەسەر هەر پێنج کارتەکە

CSS 3 Kurdish Course Class & ID 03Code Land · Kurdish (Sorani)کوردی (سۆرانی) · 3K viewsبینین · 84 likesلایک
In Kurdish: giving elements a class or an id in HTML and styling them with .class and #id selectors in an external style sheet.
بە کوردی: دانانی کلاس یان id بۆ لە و ڕازاندنەوەیان بە `.class` و `#id` لە دەرەکیدا.
Kurdish (Sorani). VV frames: .first colours two headings (3:25) and #fourth one heading (4:05), in an external style.css; at 2:30 the rule is still typed without the dot and the headings stay black until it is added.
بە کوردیی سۆرانی: لە ⁦3:25⁩ `.first` دوو سەردێڕ ڕەنگ دەکات و لە ⁦4:05⁩ `#fourth` یەک سەردێڕ، لە دەرەکیی `style.css`. لە ⁦2:30⁩ هێشتا بێ خاڵ نووسراوە و سەردێڕەکان ڕەش دەمێننەوە تا خاڵەکە زیاد دەکرێت.

Descendant and child combinatorsپەیوەستکەری نەوە و منداڵ

Selectors can be combined to describe where an element is. A space between two selectors is the descendant combinator: nav a means "an a anywhere inside a nav", at any depth. The course author's practical-test page styles its menu links with .navbar ul li a: links inside list items inside a list inside the element with class navbar. The child combinator > is stricter: .box > p means "a p whose parent is the box", not a p deeper inside.

دەتوانرێت تێکەڵ بکرێن بۆ وەسفکردنی ئەوەی لە کوێیە. لە نێوان دوو پەیوەستکەری نەوەیە: nav a واتە «aـێک لە هەر شوێنێکی ناو navـێک»، لە هەر قووڵاییەک. لاپەڕەی تاقیکردنەوەی پراکتیکیی خاوەنی کۆرسەکە لیستەکەی بە .navbar ul li a دەڕازێنێتەوە: ئەو لەناو بەندەکانی لیستێکدان کە لەناو ئەو کە کلاسی navbarـی هەیە. پەیوەستکەری منداڵ > توندترە: .box > p واتە «pـێک کە باوکەکەی سندووقەکەیە»، نەک pـێکی قووڵتر لەناویدا.

Descendant (space) and child (>)نەوە (بۆشایی) و منداڵ ⁦(>)⁩navbar.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Combinators</title>
  <style>
    .navbar ul li a { color: white; background-color: #2b5ea8;
                      padding: 4px 8px; text-decoration: none; }
    .box > p        { border-left: 4px solid #b4530f; padding-left: 6px; }
  </style>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About us</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h1>Welcome</h1>
    <p>Read our <a href="news.html">latest news</a>.</p>
    <div class="box">
      <p>A paragraph directly inside the box.</p>
      <div class="inner"><p>A paragraph deeper inside.</p></div>
    </div>
  </main>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Combinators</title>
  <style>
    .navbar ul li a { color: white; background-color: #2b5ea8;
                      padding: 4px 8px; text-decoration: none; }
    .box > p        { border-left: 4px solid #b4530f; padding-left: 6px; }
  </style>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About us</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h1>Welcome</h1>
    <p>Read our <a href="news.html">latest news</a>.</p>
    <div class="box">
      <p>A paragraph directly inside the box.</p>
      <div class="inner"><p>A paragraph deeper inside.</p></div>
    </div>
  </main>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 8

Only the three menu links; the "latest news" link is not inside .navbar.

تەنها سێ لیستەکە؛ «⁦latest news⁩» لەناو .navbarدا نییە.

Lineدێڕی 10

Only the paragraph that is a direct child of .box, not the one inside .inner.

تەنها ئەو بڕگەیەی منداڵی ڕاستەوخۆی .boxـە، نەک ئەوەی لەناو .innerدایە.

Quick checkپشکنینی خێراWhich elements does article > h2 select?article > h2 کام هەڵدەبژێرێت؟Every article and every h2هەموو article و هەموو ⁦h2⁩ـێکh2 elements whose parent is an articleئەو ⁦h2⁩ـانەی باوکیان articleـەarticle elements that contain an h2ئەو articleـانەی ⁦h2⁩یان تێدایەEvery h2 anywhere inside an article, at any depthهەموو ⁦h2⁩ـێک لە هەر شوێنێکی ناو articleـێک، لە هەر قووڵاییەک

Attribute selectorsهەڵبژێرەکانی خەسڵەت

An attribute selector chooses elements by an attribute or its value, written in square brackets right after the element name:

بەپێی یان هەڵدەبژێرێت، کە لەناو کەوانەی چوارگۆشەدا ڕاستەوخۆ دوای ناوی دەنووسرێت:

Common attribute selectors باو
Selector	Matchesدەگرێتەوە
`[title]`	Elements that have a `title` attributeئەو کە `title`ـیان هەیە
`input[type="text"]`	Inputs whose type is exactly `text`ئەو inputـانەی جۆرەکەیان ڕێک `text`ـە
`a[href^="https"]`	Links whose address starts with httpsئەو ناونیشانەکەیان بە https دەست پێدەکات
`a[href$=".pdf"]`	Links whose address ends with .pdfئەو ناونیشانەکەیان بە ⁦.pdf⁩ کۆتایی دێت
`img[src*="logo"]`	Images whose src contains logoئەو وێنانەی srcـەکەیان logoـی تێدایە

Styling by attributeڕازاندنەوە بەپێی خەسڵەتattributes.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Attribute selectors</title>
  <style>
    input[type="text"]  { border: 2px solid green; }
    a[href^="https"]    { color: #0a5a52; }
    a[href$=".pdf"]     { font-weight: bold; }
  </style>
</head>
<body>
  <form>
    <label for="name">Name</label> <input type="text" id="name" name="name">
    <label for="mail">E-mail</label> <input type="email" id="mail" name="mail">
    <button type="submit">Send</button>
  </form>
  <p><a href="https://www.example.com">A secure external site</a></p>
  <p><a href="timetable.pdf">The timetable (PDF)</a></p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Attribute selectors</title>
  <style>
    input[type="text"]  { border: 2px solid green; }
    a[href^="https"]    { color: #0a5a52; }
    a[href$=".pdf"]     { font-weight: bold; }
  </style>
</head>
<body>
  <form>
    <label for="name">Name</label> <input type="text" id="name" name="name">
    <label for="mail">E-mail</label> <input type="email" id="mail" name="mail">
    <button type="submit">Send</button>
  </form>
  <p><a href="https://www.example.com">A secure external site</a></p>
  <p><a href="timetable.pdf">The timetable (PDF)</a></p>
</body>
</html>

Input [type = "text"] matches nothing⁦Input [type = "text"]⁩ هیچ ناگرێتەوە

The slide's example is Input [type = "text"] { color: green; }. The space between Input and [ turns it into a descendant selector: "an element with type="text" inside an <input>". An <input> has no content, so nothing matches and nothing turns green. Write the attribute selector directly after the element name, with no space: input[type="text"] { color: green; }.

نموونەکەی سلایدەکە Input [type = "text"] { color: green; }ـە. ئەو لە نێوان Input و [دا هەیە دەیکاتە نەوە: « بە type="text" لەناو <input>ـێکدا». <input> ناوەڕۆکی نییە، بۆیە هیچ شتێک ناگونجێت و هیچ شتێک سەوز نابێت. ڕاستەوخۆ دوای ناوی بنووسە، بەبێ : input[type="text"] { color: green; }.

CSS Attribute SelectorsKevin Powell · Englishئینگلیزی · 24K viewsبینین · 1.6K likesلایک
Attribute selectors: match an exact value, a value that starts with (^=), ends with ($=) or contains (*=) a string, with practical examples.
: ڕێک، یان کە بە دەقێک دەست پێدەکات (`^=`)، پێی کۆتایی دێت (`$=`) یان تێیدایە (`*=`)، بە نموونەی پراکتیکی.
Covers the lesson's [attr], [type="text"], ^= and $= examples.
نموونەکانی ئەم وانەیە دەگرێتەوە: `[attr]`، `[type="text"]`، `^=` و `$=`.

Pseudo-classes: elements in a stateنیمچەکلاسەکان: توخم لە دۆخێکدا

Sometimes the look should depend on the state of an element: a link you have already visited, a button under the mouse pointer, the field you are typing in. A selects an element in such a state, as if the browser had added a class to it for you. It is a keyword after one colon: selector:state { property: value; }.

هەندێک جار شێوەکە دەبێت پەیوەست بێت بە دۆخی : کە پێشتر سەردانت کردووە، دوگمەیەک لە ژێر ، ئەو خانەیەی تێیدا دەنووسیت. لە دۆخێکی وادا هەڵدەبژێرێت، وەک ئەوەی کلاسێکی بۆ تۆ پێوە زیاد کردبێت. دوای یەک دوو خاڵ: selector:state { property: value; }.

Definitionپێناسە

A keyword after one colon that selects an in a certain state or position, such as :hover (the mouse is over it), :visited (a link you have opened) or :first-child.

دوای یەک دوو خاڵ کە لە دۆخێکی دیاریکراو یان شوێنێکی دیاریکراودا هەڵدەبژێرێت، وەک :hover ( لەسەریەتی)، :visited ( کە کردووتەتەوە) یان :first-child.

Pseudo-classes: elements in a stateنیمچەکلاسەکان: توخم لە دۆخێکدا

The four link statesچوار دۆخەکەی بەستەر

Link pseudo-classes, in the order to write them ، بەو ڕیزبەندییەی دەبێت بنووسرێن
Pseudo-class	When it appliesکەی جێبەجێ دەبێت
`:link`	A link that has an `href` and that you have not visited yet کە `href`ـی هەیە و هێشتا سەردانت نەکردووە
`:visited`	A link to a page you have already visited بۆ لاپەڕەیەک کە پێشتر سەردانت کردووە
`:hover`	While the mouse pointer is over the element (any element, not only links)لەو کاتەی لەسەر (هەر ، نەک تەنها )
`:active`	While the element is being activated: from pressing the mouse button until you release itلەو کاتەی چالاک دەکرێت: لە داگرتنی دوگمەی ماوسەوە تا بەریدەدەیت

The four states of a link, in LVHA order.چوار دۆخەکەی ، بە ڕیزبەندیی LVHA.CêIT

The lecture's link stylesشێوازەکانی بەستەری وانەکەlinks.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states</title>
  <style>
    a:link    { color: white; background-color: black; border: 1px solid white; }
    a:visited { color: white; background-color: brown; }
    a:hover   { color: black; background-color: white; border: 1px solid black; }
    a:active  { color: white; background-color: #b4530f; }
  </style>
</head>
<body>
  <p>Visit the <a href="https://www.example.com">example site</a>
  or the <a href="#top">top of this page</a>.</p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states</title>
  <style>
    a:link    { color: white; background-color: black; border: 1px solid white; }
    a:visited { color: white; background-color: brown; }
    a:hover   { color: black; background-color: white; border: 1px solid black; }
    a:active  { color: white; background-color: #b4530f; }
  </style>
</head>
<body>
  <p>Visit the <a href="https://www.example.com">example site</a>
  or the <a href="#top">top of this page</a>.</p>
</body>
</html>

Move the mouse over a link and press it to see :hover and :active.

بخە سەر و دایبگرە بۆ بینینی :hover و :active.

From LINK, VLINK and ALINK to CSSلە LINK، VLINK و ALINKـەوە بۆ CSS

The lecture first colours links with attributes of <body>: LINK (unvisited, default blue #0000FF), VLINK (visited, default purple #800080) and ALINK (active, default red #FF0000), and changes one link with <a href="…"><font color="FF00CC">here</font></a>. All of these are obsolete; CSS does it with a:link, a:visited and a:active. Also, the slide explains ALINK as the colour "when the mouse is on it": that is hover. Active means while the link is being clicked.

وانەکە سەرەتا بە <body> ڕەنگ دەکات: LINK (سەردان نەکراو، بنەڕەت شین #0000FF)، VLINK (سەردان کراو، بنەڕەت مۆر #800080) و ALINK (چالاک، بنەڕەت سوور #FF0000) و یەک بە <a href="…"><font color="FF00CC">here</font></a> دەگۆڕێت. هەموو ئەمانە ؛ بە a:link، a:visited و a:active ئەم کارە دەکات. هەروەها سلایدەکە ALINK وەک ڕەنگی «کاتێک لەسەریەتی» ڕوون دەکاتەوە: ئەوە hoverـە. Active واتە لەو کاتەی کلیکی لەسەر دەکرێت.

The old way, for recognition onlyڕێگە کۆنەکە، تەنها بۆ ناسینەوەHTML

<!-- Old (obsolete) -->
<body LINK="#C0C0C0" VLINK="#808080" ALINK="#FF0000">
  Click <a href="https://www.example.com"><font color="FF00CC">here</font></a>.
</body>

The same with CSSهەمان شت بە CSSCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات

/* Today */
a:link    { color: #c0c0c0; }
a:visited { color: #808080; }
a:active  { color: #ff0000; }

/* one special link: give it a class */
a.special { color: #ff00cc; }

Pseudo-classes: elements in a stateنیمچەکلاسەکان: توخم لە دۆخێکدا

Why the order is LVHAبۆچی ڕیزبەندییەکە LVHAـیە

a:link, a:visited, a:hover and a:active all have the same (0-1-1). So when two of them apply at the same time, for example a visited link under the mouse, the rule written later wins. Write them in the order Link, Visited, Hover, Active ("LoVe HAte"). Then hovering works on visited links too, and the active colour shows while you click.

a:link، a:visited، a:hover و a:active هەموویان هەمان هەیە ⁦(0-1-1)⁩. بۆیە کاتێک دووانیان لە هەمان کاتدا جێبەجێ دەبن، بۆ نموونە سەردانکراو لە ژێر ، ئەو ڕێسایەی دواتر نووسراوە دەباتەوە. بەم ڕیزبەندییە بیاننووسە: Link، Visited، Hover، Active («LoVe HAte»). ئەو کاتە hover لەسەر سەردانکراویش کار دەکات و ڕەنگی active لە کاتی کلیککردندا دەردەکەوێت.

An animation in six steps. A link Courses in a menu is blue (a:link). The mouse pointer moves over it and it gets a light background (a:hover). The button is pressed and it turns red (a:active). After the visit it is purple (a:visited). The pointer moves over the visited link and the hover background still appears, because a:hover is written after a:visited. Last frame: write the rules in the order link, visited, hover, active. — The link states one after another, with the rule that applies.دۆخەکانی یەک لە دوای یەک، لەگەڵ ئەو ڕێسایەی جێبەجێ دەبێت.CêIT

Quick checkپشکنینی خێراA style sheet has a:hover { color: red; } before a:visited { color: purple; }. What happens when you move the mouse over a visited link? a:hover { color: red; }ـی پێش a:visited { color: purple; } هەیە. کاتێک دەخەیتە سەر سەردانکراو چی ڕوودەدات؟It turns redسوور دەبێتIt stays purple: the later rule winsمۆر دەمێنێتەوە: ڕێسای دواتر دەباتەوەIt turns blueشین دەبێتThe browser shows an errorتۆڕگەڕ هەڵەیەک پیشان دەدات

Pseudo-classes: elements in a stateنیمچەکلاسەکان: توخم لە دۆخێکدا

:focus for keyboard users:focus بۆ بەکارهێنەرانی کیبۆرد

Many people use a website with the keyboard: Tab moves to the next link, button or form field. :focus selects the element that has the focus now. :focus-visible is the same, but only when the browser thinks the user needs to see it (keyboard use, not a mouse click), so it is the best place for a strong outline. Browsers draw a focus outline by default. Never remove it with outline: none unless you give a clear replacement, as the input below does with its border.

زۆر کەس بە بەکار دەهێنن: Tab دەچێتە سەر ، دوگمە یان خانەی دواتر. :focus ئەو هەڵدەبژێرێت کە ئێستا focusـی لەسەرە. :focus-visible هەمان شتە، بەڵام تەنها کاتێک پێی وایە بەکارهێنەر پێویستی بە بینینییەتی (بەکارهێنانی ، نەک کلیکی ماوس)، بۆیە باشترین شوێنە بۆ هێڵێکی دەوری بەهێز. بە شێوەی بنەڕەتی هێڵی focus دەکێشن. هەرگیز بە outline: none لای مەبە مەگەر جێگرەوەیەکی ڕوون بدەیت، وەک ئەوەی inputـەکەی خوارەوە بە دەیکات.

Visible focusfocusـی دیارfocus.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Focus</title>
  <style>
    a:focus-visible  { outline: 3px solid #b4530f; outline-offset: 2px; }
    input:focus      { border: 2px solid #2b5ea8; outline: none; }
  </style>
</head>
<body>
  <p><a href="index.html">Home</a> · <a href="news.html">News</a></p>
  <label for="q">Search</label> <input type="search" id="q" name="q">
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Focus</title>
  <style>
    a:focus-visible  { outline: 3px solid #b4530f; outline-offset: 2px; }
    input:focus      { border: 2px solid #2b5ea8; outline: none; }
  </style>
</head>
<body>
  <p><a href="index.html">Home</a> · <a href="news.html">News</a></p>
  <label for="q">Search</label> <input type="search" id="q" name="q">
</body>
</html>

Click inside the preview and press Tab to move the focus.

لەناو پێشبینینەکەدا کلیک بکە و Tab دابگرە بۆ جووڵاندنی focus.

Pseudo-classes: elements in a stateنیمچەکلاسەکان: توخم لە دۆخێکدا

:first-child, :last-child and :nth-child:⁦first-child⁩، :⁦last-child⁩ و :⁦nth-child⁩

Some pseudo-classes select by position among brothers and sisters. :first-child matches an element that is the first child of its parent and :last-child the last one. :nth-child(n) matches every element that is the n-th child of its parent, whatever its type. Counting starts at 1, and n can be:

هەندێک بەپێی شوێن لە نێوان خوشک و براکاندا هەڵدەبژێرن. :first-child دەگرێتەوە کە یەکەم منداڵی باوکەکەیەتی و :last-child دواینیان. :nth-child(n) هەموو ئەو دەگرێتەوە کە منداڵی n-ەمی باوکیانن، جۆرەکەیان هەرچییەک بێت. ژماردن لە ١ـەوە دەست پێدەکات و n دەتوانێت ئەمانە بێت:

a number: :nth-child(3) is the third child;
a keyword: odd (1, 3, 5 …) or even (2, 4, 6 …);
a formula An+B: 2n+1 is the same as odd, 3n is every third child, -n+3 the first three.

ژمارەیەک: :nth-child(3) منداڵی سێیەمە؛
: odd (١، ٣، ٥ …) یان even (٢، ٤، ٦ …)؛
هاوکێشەیەکی An+B: 2n+1 وەک oddـە، 3n هەموو منداڵێکی سێیەمە، -n+3 سێ یەکەمەکان.

Several pseudo-classes can be joined on one selector when they do not exclude each other: li:nth-child(odd):hover is an odd item under the mouse. a:link:visited can never match, because a link cannot be visited and unvisited at once.

دەتوانرێت چەند لەسەر یەک پێکەوە بلکێنرێن کاتێک یەکتر ڕەت ناکەنەوە: li:nth-child(odd):hover بەندێکی تاکە لە ژێر . a:link:visited هەرگیز ناگونجێت، چونکە ناتوانێت لە یەک کاتدا سەردانکراو و سەردان نەکراو بێت.

First, last, odd, and odd under the mouseیەکەم، دوایین، تاک و تاک لە ژێر نیشاندەرleague.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Structural pseudo-classes</title>
  <style>
    .league li:first-child   { font-weight: bold; }
    .league li:nth-child(odd) { background-color: #eaf1fb; }
    .league li:last-child    { color: #5a5f66; }
    .league li:nth-child(odd):hover { background-color: #dcefeb; }
  </style>
</head>
<body>
  <h1>School football league</h1>
  <ol class="league">
    <li>Eagles</li>
    <li>Lions</li>
    <li>Falcons</li>
    <li>Tigers</li>
    <li>Wolves</li>
  </ol>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Structural pseudo-classes</title>
  <style>
    .league li:first-child   { font-weight: bold; }
    .league li:nth-child(odd) { background-color: #eaf1fb; }
    .league li:last-child    { color: #5a5f66; }
    .league li:nth-child(odd):hover { background-color: #dcefeb; }
  </style>
</head>
<body>
  <h1>School football league</h1>
  <ol class="league">
    <li>Eagles</li>
    <li>Lions</li>
    <li>Falcons</li>
    <li>Tigers</li>
    <li>Wolves</li>
  </ol>
</body>
</html>

Pseudo-elements: parts of an elementنیمچەتوخمەکان: بەشەکانی توخمێک

A styles a part of an element as if it were a separate element: its first letter, its first line, or new content added before or after it. It is written with two colons: selector::pseudo-element { property: value; }.

بەشێک لە دەڕازێنێتەوە وەک ئەوەی جیا بێت: یەکەم پیتی، یەکەم دێڕی، یان ناوەڕۆکی نوێ کە پێش یان دوای زیاد دەکرێت. بە دوو جار دوو خاڵ دەنووسرێت: selector::pseudo-element { property: value; }.

Common pseudo-elements باو
Pseudo-element	Stylesچی دەڕازێنێتەوە
`::first-line`	The first line of a block, however long the line is on this screenیەکەم دێڕی بلۆکێک، درێژیی دێڕەکە لەسەر ئەم شاشەیە هەرچەند بێت
`::first-letter`	The first letter, for example a big drop capیەکەم پیت، بۆ نموونە پیتێکی گەورەی سەرەتا
`::before`, `::after::before`، `::after`	New content from the `content` property, before or after the element's contentناوەڕۆکی نوێ لە `content`، پێش یان دوای ناوەڕۆکی
`::selection`	The text the user has selected with the mouseئەو دەقەی بەکارهێنەر بە ماوس دیاری کردووە
`::marker`	The bullet or number of a list item (List styles)خاڵ یان ژمارەی بەندێکی لیست (شێوەی لیست)

A drop cap, a first line and » bulletsپیتی گەورەی سەرەتا، یەکەم دێڕ و خاڵی »pseudo-elements.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pseudo-elements</title>
  <style>
    .story p::first-letter { font-size: 2.5em; font-weight: bold; color: #b4530f; }
    .story p::first-line   { font-variant: small-caps; }
    .menu { list-style: none; padding-left: 0; }
    .menu li::before       { content: "\00BB\0020"; color: #2b5ea8; }
    ::selection            { color: red; background-color: yellow; }
  </style>
</head>
<body>
  <h1>A short story</h1>
  <article class="story">
    <h2>The tea house</h2>
    <p>Once there was a small tea house in the old bazaar of Erbil. Every morning the
    owner opened the doors and the smell of fresh tea filled the street.</p>
  </article>
  <h2>Main menu</h2>
  <ul class="menu">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pseudo-elements</title>
  <style>
    .story p::first-letter { font-size: 2.5em; font-weight: bold; color: #b4530f; }
    .story p::first-line   { font-variant: small-caps; }
    .menu { list-style: none; padding-left: 0; }
    .menu li::before       { content: "\00BB\0020"; color: #2b5ea8; }
    ::selection            { color: red; background-color: yellow; }
  </style>
</head>
<body>
  <h1>A short story</h1>
  <article class="story">
    <h2>The tea house</h2>
    <p>Once there was a small tea house in the old bazaar of Erbil. Every morning the
    owner opened the doors and the smell of fresh tea filled the street.</p>
  </article>
  <h2>Main menu</h2>
  <ul class="menu">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 11

The course author's practical-test page draws » bullets like this; \00BB is the code of », \0020 a space.

لاپەڕەی تاقیکردنەوەی پراکتیکیی خاوەنی کۆرسەکە بەم شێوەیە خاڵی » دەکێشێت؛ \00BB کۆدی »ـە و \0020 .

Lineدێڕی 12

The slide's example: selected text is red on yellow.

نموونەکەی سلایدەکە: دەقی دیاریکراو سوورە لەسەر زەرد.

Noteتێبینی

::before and ::after show nothing without a content property, even content: "". Old CSS wrote pseudo-elements with one colon (li:before, as in the course author's page); browsers still accept that for the four oldest ones, but write two colons. Do not put important text in content: some screen readers skip it, and it cannot be selected or translated. Use it for decoration such as bullets and icons.

::before و ::after بەبێ content هیچ پیشان نادەن، تەنانەت content: "". کۆن بە یەک دوو خاڵ دەنووسی (li:before، وەک لە لاپەڕەکەی خاوەنی کۆرسەکەدا)؛ هێشتا ئەوە بۆ چوار کۆنترینیان وەردەگرن، بەڵام دوو جار دوو خاڵ بنووسە. دەقی گرنگ مەخە ناو content: هەندێک دەیپەڕێنن و ناتوانرێت دیاری بکرێت یان وەربگێڕدرێت. بۆ ڕازاندنەوەی وەک خاڵ و ئایکۆن بەکاری بهێنە.

Quick checkپشکنینی خێراWhat is the difference between :hover and ::first-line?جیاوازیی نێوان :hover و ::first-line چییە؟:hover is a state of a whole element; ::first-line is a part of an element:hover دۆخی هەموو توخمێکە؛ ::first-line بەشێکە لە توخمێک::first-line needs JavaScript::first-line پێویستی بە JavaScript هەیەThere is none; the number of colons is freeهیچ جیاوازییەک نییە؛ ژمارەی دوو خاڵەکان ئازادە:hover works only on paragraphs:hover تەنها لەسەر بڕگە کار دەکات

Learn CSS pseudo-elements in 5 minutes! ✔Bro Code · Englishئینگلیزی · 56K viewsبینین · 1.6K likesلایک
Pseudo-elements with two colons: ::first-letter, ::first-line, ::selection, and adding content with ::before and ::after.
بە دوو خاڵی سەریەک: `::first-letter`، `::first-line`، `::selection` و زیادکردنی ناوەڕۆک بە `::before` و `::after`.
Matches the screen's ::first-letter, ::first-line, ::before and ::after.
هەمان نموونەکانی ئەم بەشە پیشان دەدات: `::first-letter`، `::first-line`، `::before` و `::after`.

Specificity of each kind of selectorوردیی هەڵبژێری هەر جۆرێکی هەڵبژێر

The cascade from CSS Basics counts selectors in three columns. Here is the whole list with the selectors of this lesson:

لە بنەماکانی CSSـدا لە سێ ستووندا دەژمێرێت. ئەمە هەموو لیستەکەیە لەگەڵ ئەم وانەیە:

What each selector addsهەر چی زیاد دەکات
Kindجۆر	Exampleنموونە	Counts inلە کوێدا دەژمێردرێت
Universal, combinatorsگشتی، پەیوەستکەرەکان	``, space, `>`، ، `>`	Nothing (0-0-0)هیچ ⁦(0-0-0)⁩
Type, pseudo-elementجۆر،	`p`, `::beforep`، `::before`	ELEMENT (0-0-1)ستوونی ⁦ELEMENT (0-0-1)⁩
Class, attribute, pseudo-classکلاس، ،	`.note`, `[type="text"]`, `:hover.note`، `[type="text"]`، `:hover`	CLASS (0-1-0)ستوونی ⁦CLASS (0-1-0)⁩
ID	`#menu`	ID (1-0-0)ستوونی ⁦ID (1-0-0)⁩
Inline styleشێوازی ناو	`style="…"`	Beats every selectorلە هەموو دەباتەوە

Examples: .navbar ul li a scores 0-1-3, a:hover 0-1-1 and #menu a:hover 1-1-1.

نموونەکان: .navbar ul li a نمرەی ⁦0-1-3⁩ وەردەگرێت، a:hover ⁦0-1-1⁩ و #menu a:hover ⁦1-1-1⁩.

Common mistakesهەڵەکانی باو

Mistakes to avoid کە دەبێت خۆتیان لێ بپارێزیت
Mistake	What happensچی ڕوودەدات	Fixچارەسەر
`#note` for `class="note"` (or `.note` for an id)`#note` بۆ `class="note"` (یان `.note` بۆ id)	Nothing is styled.هیچ شتێک ناڕازێنرێتەوە.	`.` for classes, `#` for ids.`.` بۆ کلاس، `#` بۆ id.
`p .note` when you mean `p.notep .note` کاتێک مەبەستت `p.note`ـە	Looks for `.note` inside a paragraph.بە دوای `.note`دا لەناو بڕگەیەکدا دەگەڕێت.	No space: `p.note`.بەبێ : `p.note`.
`Input [type="text"]Input [type="text"]`	Matches nothing.هیچ ناگرێتەوە.	`input[type="text"]`
The same id on two elementsهەمان id لەسەر دوو	Invalid page; links and scripts find only one.لاپەڕەی نادروست؛ و سکریپتەکان تەنها یەکێکیان دەدۆزنەوە.	Use a class.کلاس بەکاربهێنە.
`a:hover` before `a:visiteda:hover` پێش `a:visited`	No hover colour on visited links.ڕەنگی hover لەسەر سەردانکراو نییە.	LVHA order.ڕیزبەندیی LVHA.
`::before` without `content::before` بەبێ `content`	Nothing appears.هیچ دەرناکەوێت.	`content: "…";`
`outline: none` on focus`outline: none` لەسەر focus	Keyboard users get lost.بەکارهێنەرانی ون دەبن.	Keep or replace the outline.هێڵی دەورەکە بهێڵەرەوە یان جێگرەوەیەکی بدە.
One wrong selector in a list (`h1, ..note`)یەک هەڵە لە لیستێکدا (`h1, ..note`)	The whole rule is dropped.هەموو ڕێساکە فڕێ دەدرێت.	Check each selector.هەر بپشکنە.

Exercisesڕاهێنانەکان

ExerciseڕاهێنانWrite the selectorsهەڵبژێرەکان بنووسە

Write a selector for each: (a) every paragraph; (b) the element with id="logo"; (c) every element with the class price; (d) links inside <nav>; (e) list items that are direct children of ul.menu; (f) e-mail fields (<input type="email">); (g) the first item of every list; (h) links to PDF files.

بۆ هەریەکەیان بنووسە: (أ) هەموو بڕگەیەک؛ (ب) ئەو id="logo"ی هەیە؛ (ج) هەموو بە کلاسی price؛ (د) لەناو <nav>؛ (هـ) ئەو بەندانەی لیست کە منداڵی ڕاستەوخۆی ul.menuن؛ (و) خانەکانی ئیمەیڵ (<input type="email">)؛ (ز) یەکەم بەندی هەموو لیستێک؛ (ح) بۆ PDF.

Show answerوەڵامەکە پیشان بدە

CSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات

p { }                    /* (a) */
#logo { }                /* (b) */
.price { }               /* (c) */
nav a { }                /* (d) */
ul.menu > li { }         /* (e) */
input[type="email"] { }  /* (f) */
li:first-child { }       /* (g) */
a[href$=".pdf"] { }      /* (h) */

ExerciseڕاهێنانPredict the red elementsتوخمەکان سوورەکان پێشبینی بکە

Which elements turn red with each rule? Use this HTML.

بە هەر ڕێسایەک کام سوور دەبن؟ ئەم بەکاربهێنە.

HTML

<ul id="list">
  <li class="new">Erbil</li>
  <li>Duhok</li>
  <li class="new"><a href="sul.html">Sulaymaniyah</a></li>
</ul>
<p class="new">Halabja</p>

Show answerوەڵامەکە پیشان بدە

.new { color: red; } → Erbil, the Sulaymaniyah item (the link inside inherits nothing: links have their own colour) and Halabja.
li.new { color: red; } → Erbil and the Sulaymaniyah item, not the paragraph Halabja.
#list li:nth-child(2) { color: red; } → Duhok.
.new a { color: red; } → the link Sulaymaniyah only.
ul > .new { color: red; } → Erbil and the Sulaymaniyah item.

.new { color: red; } ← Erbil، بەندی Sulaymaniyah ( ناوی هیچ وەرناگرێت: ڕەنگی خۆیان هەیە) و Halabja.
li.new { color: red; } ← Erbil و بەندی Sulaymaniyah، نەک بڕگەی Halabja.
#list li:nth-child(2) { color: red; } ← Duhok.
.new a { color: red; } ← تەنها Sulaymaniyah.
ul > .new { color: red; } ← Erbil و بەندی Sulaymaniyah.

ExerciseڕاهێنانA navigation bar with hoverلیستی ڕێنیشاندەر بە hoverـەوە

Build a horizontal navigation bar from a list of three links. The links are white on dark blue, get a lighter background under the mouse and a different colour while pressed, and show a clear outline for keyboard focus. Write the link rules in LVHA order.

ئاسۆیی لە لیستێکی سێ دروست بکە. سپین لەسەر شینی تاریک، لە ژێر باکگراوندێکی کاڵتر وەردەگرن و لە کاتی داگرتندا ڕەنگێکی جیاواز، هەروەها بۆ focusـی هێڵێکی دەوری ڕوون پیشان دەدەن. ڕێساکانی بە ڕیزبەندیی LVHA بنووسە.

Start from this HTMLلەم HTMLـەوە دەست پێبکەHTML

<nav class="site-nav">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="courses.html">Courses</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Hintئاماژە

display: inline-block puts the list items side by side. A navigation bar: from inline-block to flex builds the same bar with flexbox later.

display: inline-block بەندەکانی لیست لە تەنیشت یەکتر دادەنێت. لیستی ڕێنیشاندەر: لە ⁦inline-block⁩ـەوە بۆ flex دواتر هەمان شریت بە flexbox دروست دەکات.

Show answerوەڵامەکە پیشان بدە

navbar.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navigation bar</title>
  <style>
    .site-nav ul { list-style: none; margin: 0; padding: 0; background-color: #1f4e79; }
    .site-nav li { display: inline-block; }
    .site-nav a  { display: block; padding: 10px 16px; text-decoration: none; }
    .site-nav a:link,
    .site-nav a:visited { color: #ffffff; }
    .site-nav a:hover   { background-color: #2b5ea8; }
    .site-nav a:active  { background-color: #0a5a52; }
    .site-nav a:focus-visible { outline: 3px solid #fdf3e1; }
  </style>
</head>
<body>
  <nav class="site-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="courses.html">Courses</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navigation bar</title>
  <style>
    .site-nav ul { list-style: none; margin: 0; padding: 0; background-color: #1f4e79; }
    .site-nav li { display: inline-block; }
    .site-nav a  { display: block; padding: 10px 16px; text-decoration: none; }
    .site-nav a:link,
    .site-nav a:visited { color: #ffffff; }
    .site-nav a:hover   { background-color: #2b5ea8; }
    .site-nav a:active  { background-color: #0a5a52; }
    .site-nav a:focus-visible { outline: 3px solid #fdf3e1; }
  </style>
</head>
<body>
  <nav class="site-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="courses.html">Courses</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 8

list-style: none removes the bullets (List styles).

list-style: none خاڵەکان لادەبات (شێوەی لیست).

Summaryپوختە

Type p, class .name, id #name (one element), universal *; a selector list h1, h2 shares one rule.
Prefer classes for styling; an id is unique and very specific.
A space selects descendants (nav a), > direct children (ul > li).
Attribute selectors: input[type="text"] (no space), a[href^="https"], a[href$=".pdf"].
Pseudo-classes (one colon) select states: :link, :visited, :hover, :active in LVHA order, :focus, :first-child, :nth-child().
Pseudo-elements (two colons) select parts: ::first-line, ::first-letter, ::before/::after with content, ::selection, ::marker.

جۆر p، کلاس .name، id #name (یەک )، گشتی *؛ لیستی h1, h2 یەک ڕێسا بەکار دەهێنێت.
بۆ ڕازاندنەوە کلاس باشترە؛ id تاکە و زۆر وردە.
نەوەکان هەڵدەبژێرێت (nav a)، > منداڵە ڕاستەوخۆکان (ul > li).
: input[type="text"] (بەبێ )، a[href^="https"]، a[href$=".pdf"].
(یەک دوو خاڵ) دۆخ هەڵدەبژێرن: :link، :visited، :hover، :active بە ڕیزبەندیی LVHA، :focus، :first-child، :nth-child().
(دوو جار دوو خاڵ) بەش هەڵدەبژێرن: ::first-line، ::first-letter، ::before/::after بە content، ::selection، ::marker.

Review questionsپرسیارەکانی پێداچوونەوە

Compare class and ID selectors in one sentence each.هەڵبژێری کلاس و هەڵبژێری ID هەریەکەیان بە یەک ڕستە بەراورد بکە.

A class selector (.x) styles every element with that class; an ID selector (#x) styles the one element with that unique id and has a higher specificity.

(.x) هەموو بەو کلاسە دەڕازێنێتەوە؛ (#x) ئەو یەک دەڕازێنێتەوە کە ئەو idـە تاکەی هەیە و بەرزترە.

Why does Input [type="text"] style nothing?بۆچی Input [type="text"] هیچ ناڕازێنێتەوە؟

The space makes it a descendant selector: it looks for elements inside an input, and inputs have no children.

دەیکاتە نەوە: بە دوای لەناو inputـێکدا دەگەڕێت و input منداڵی نییە.

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

Learn Every CSS Selector In 20 MinutesWeb Dev Simplified · Englishئینگلیزی · 507K viewsبینین · 19K likesلایک
A tour of CSS selectors: universal, type, class and id, combining them, descendant, child and sibling combinators, and pseudo-classes.
گەشتێک بە ناو : گشتی، جۆر، کلاس و id، تێکەڵکردنیان، پەیوەستکەری نەوە، منداڵ و خوشک‌وبرا، هەروەها .
Chapters: selectors 0:36, combining 5:10, siblings 7:49, pseudo-classes 10:23.
بەشەکان: لە ⁦0:36⁩، تێکەڵکردنیان لە ⁦5:10⁩، خوشک‌وبراکان لە ⁦7:49⁩ و لە ⁦10:23⁩.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Styling Text, Backgrounds, Lists and Tablesڕازاندنەوەی دەق، باکگراوند، لیست و خشتەکان

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.