Selectors

Π­Ρ‚ΠΎ пятый Ρ€Π°Π·Π΄Π΅Π» руководства CSS для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…. Π’ Π½Π΅ΠΌ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΎΡ€ΠΎΡ‡Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили ΠΈ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ сСлСкторов ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹.  

НСкоторыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΊ Ρ‚Π΅Π³Π°ΠΌ Π² шаблонС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΈ эти Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² шаблонС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ: Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹

Π Π°Π½Π΅Π΅ ΠΌΡ‹ ΡƒΠΆΠ΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π»ΠΈΡΡŒ с сСлСкторами. ΠœΡ‹ создали строку Π² Ρ„Π°ΠΉΠ»Π΅ стилСй ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π°:

strong {
  color: red;
}

Π’ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ CSS эта строка ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ являСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ CSS. Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ начинаСтся со strong, Ρ‡Ρ‚ΠΎ ΠΈ называСтся сСлСктором CSS. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚, ΠΊ ΠΊΠ°ΠΊΠΈΠΌ элСмСнтам DOM примСняСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΡΡ‚ΠΈ

Π§Π°ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобок называСтся объявлСниСм.

ΠšΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово colorсвойство, Π° red - Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π’ΠΎΡ‡ΠΊΠ° с запятой послС ΠΏΠ°Ρ€Ρ‹ "свойство-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅" отдСляСт Π΅Ρ‘ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ°Ρ€ "свойство-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅" Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ объявлСнии.

Π­Ρ‚ΠΎΡ‚ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ ссылаСтся Π½Π° сСлСктор Ρ‚ΠΈΠΏΠ° strong ΠΊΠ°ΠΊ Π½Π° сСлСктор Ρ‚Π΅Π³Π°. БпСцификация CSS ссылаСтся Π½Π° Π½Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π½Π° сСлСктор Ρ‚ΠΈΠΏΠ°.

На этой страницС ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ сСлСкторах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… CSS.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠΌΠ΅Π½Π°ΠΌ Ρ‚Π΅Π³ΠΎΠ², Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² сСлСкторах значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ². Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ вашим ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·Π±ΠΈΡ€Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

Π”Π²Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ особый статус Π² CSS. Π­Ρ‚ΠΎ class ΠΈ id.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ классов

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ class Π² элСмСнтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ классу. Π’Ρ‹Π±ΠΎΡ€ ΠΈΠΌΠ΅Π½ΠΈ класса Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Π·Π° Π²Π°ΠΌΠΈ. ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ класса.

Π’ вашСй Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ класса для использования Π΅Π³ΠΎ Π² качСствС сСлСктора.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ ID

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id Π² элСмСнтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнту. Π­Ρ‚ΠΎ зависит ΠΎΡ‚ вас, ΠΊΠ°ΠΊΠΎΠ΅ имя Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ для ID. Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ имя Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π·Π½Π°ΠΊ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π΅Π³ΠΎ Π² сСлСкторС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€
Π­Ρ‚ΠΎΡ‚ HTML тэг ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±Π° элСмСнта, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ class ΠΈ id:
<p class="key" id="principal">

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° id, principal, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ тэги Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ имя class со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ key.

Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ всС классы(class) со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌkey Π·Π΅Π»Ρ‘Π½Ρ‹ΠΌΠΈ. (Они Π΄Π°ΠΆΠ΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ всС элСмСнтами <p>.)

.key {
  color: green;
}

Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ элСмСнт с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ (id) ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ principal ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ:

#principal {
  font-weight: bolder;
}

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Атрибутов

Π’Ρ‹ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ двумя ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ, class ΠΈ id. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ скобки. Π’Π½ΡƒΡ‚Ρ€ΠΈ скобок Π²Ρ‹ Π·Π°Π΄Π°Ρ‘Ρ‚Π΅ имя Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ соотвСтствия ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, соотвСтствиС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ установлСно ΠΊΠ°ΠΊ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΊ рСгистру Ссли Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ " i" послС значСния, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ это ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:

[disabled]
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ всС элСмСнты с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ "disabled".
[type='button']
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты с Ρ‚ΠΈΠΏΠΎΠΌ "button".
[class~=key]
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ класса(class) "key" (Π½ΠΎ Π½Π΅ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ "keyed", "monkey", "buckeye"). По сути эквивалСнтно .key.
[lang|=es]
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ ΠΊΠ°ΠΊ Spanish. Π­Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ "es" ΠΈ "es-MX" Π½ΠΎ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ "eu-ES" (Ρ‡Ρ‚ΠΎ являСтся языком Basque).
[title*="example" i]
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты Π² состав ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ…ΠΎΠ΄ΠΈΡ‚ "example", игнорируя рСгистр. Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ„Π»Π°Π³ "i", этот сСлСктор Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ элСмСнт.
a[href^="https://"]
Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ всС Π·Π°Ρ‰ΠΈΡ‰Ρ‘Π½Π½Ρ‹Π΅ ссылки.
img[src$=".png"]
КосвСнно Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ изобраТСния PNG; Π»ΡŽΠ±Ρ‹Π΅ изобраТСния ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ изобраТСниями PNG Π½ΠΎ, Ρ‡Π΅ΠΉ адрСс URL Π½Π΅ заканчиваСтся Π½Π° ".png" (Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π² строкС запроса) Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ псСвдокласса

ПсСвдокласс класса CSS - это ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠ΅ Π² сСлСктор, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π΄Π°Π΅Ρ‚ особоС состояниС Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта. НапримСр : hover ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° элСмСнт, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ сСлСктором.

ПсСвдо-классы вмСстС с псСвдоэлСмСнтами ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ элСмСнту Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ Π΄Π΅Ρ€Π΅Π²Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², Π½ΠΎ ΠΈ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ внСшним Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌ, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ история Π½Π°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€Π° (:visited, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°), статус Π΅Π³ΠΎ содСрТимого (Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ :checked Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнтах Ρ„ΠΎΡ€ΠΌΡ‹) ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ (Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ :hover ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡƒΠ·Π½Π°Ρ‚ΡŒ, находится Π»ΠΈ ΠΌΡ‹ΡˆΡŒ Π½Π°Π΄ элСмСнтом ΠΈΠ»ΠΈ Π½Π΅Ρ‚). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список сСлСкторов, посСтитС CSS3 БпСцификация Ρ€Π°Π±ΠΎΡ‚Ρ‹ сСлСкторов.

Бинтаксис
selector:pseudo-class {
  property: value;
}

Бписок псСвдоклассов

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ: Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ

НСсколько ΠΏΡ€Π°Π²ΠΈΠ» ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ сСлСктор, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… соотвСтствуСт ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ элСмСнту. Если свойство Π·Π°Π΄Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ, ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚, ΠΈ свойство устанавливаСтся Π² элСмСнтС. Если ΠΊ элСмСнту примСняСтся Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ устанавливаСт ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ свойство, Ρ‚ΠΎΠ³Π΄Π° CSS Π΄Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ сСлСктор. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ID Π±ΠΎΠ»Π΅Π΅ спСцифичСн, Ρ‡Π΅ΠΌ сСлСктор класса, псСвдокласса ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Π±ΠΎΠ»Π΅Π΅ спСцифичСн, Ρ‡Π΅ΠΌ сСлСктор Ρ‚Π΅Π³ΠΎΠ² ΠΈΠ»ΠΈ псСвдоэлСмСнтов.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сСлСктор, создавая Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ сСлСктор. НапримСр, сСлСктор .key Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ всС элСмСнты, с ΠΊΠ»ΡŽΡ‡ΠΎΠΌ ΠΈΠΌΠ΅Π½ΠΈ класса key. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ p.key ΠΎΡ‚Π±ΠΈΡ€Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ <p> элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ имя класса key.

Если Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΠ²Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΈ ΠΎΠ½ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ спСцифичны, Ρ‚ΠΎΠ³Π΄Π° CSS Π΄Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ·ΠΆΠ΅ находится Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй.

Если Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ это, сдСлав ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ» Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π»ΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚. Если Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ этого ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ» Π±Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π»ΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ: Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π½Π° основС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ

CSS ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько способов Π²Ρ‹Π±ΠΎΡ€Π° элСмСнтов Π½Π° основС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСлСктора Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌΠΈ.

ΠžΠ±Ρ‰ΠΈΠ΅ сСлСкторы, основанныС Π½Π° ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΡ…
Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ Π’Ρ‹Π±Ρ€Π°Π½ΠΎ
A E Π›ΡŽΠ±ΠΎΠΉ E элСмСнт, Ρ‡Ρ‚ΠΎ являСтся ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· A элСмСнта (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ: Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ, Ρ‚.Π΄.)
A > E Π›ΡŽΠ±ΠΎΠΉ E элСмСнт, Ρ‡Ρ‚ΠΎ явлСтся  Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ (Ρ‚.Π΅. прямой ΠΏΠΎΡ‚ΠΎΠΌΠΎΠΊ)  A элСмСнта.
E:first-child Π›ΡŽΠ±ΠΎΠΉ E элСмСнт, Ρ‡Ρ‚ΠΎ являСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ элСмСнтом Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.
B + E Π›ΡŽΠ±ΠΎΠΉ E элСмСнт, Ρ‡Ρ‚ΠΎ являСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ "Π±Ρ€Π°Ρ‚ΠΎΠΌ" B элСмСнта (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ: ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π±Π΅Π½ΠΎΠΊ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ родитСля)

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для выраТСния слоТных ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ символ * (Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ°), Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ "любой элСмСнт".

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’Π°Π±Π»ΠΈΡ†Π° HTML ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id , Π½ΠΎ строки ΠΈ ячСйки Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ²:

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

Π­Ρ‚ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ячСйку Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠΉ, Π° "Π±Ρ€Π°Ρ‚" ΠΏΠ΅Ρ€Π²ΠΎΠΉ ячСйки ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки Π·Π°Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠΉ (Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 2-я ячСйка) . Они Π²Π»ΠΈΡΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅::

#data-table-1 td:first-child {text-decoration: underline;}
#data-table-1 td:first-child + td {text-decoration: line-through;}

Π Π΅Π·ΡƒΠ»ΡŒΠ°Ρ‚  выглядит  Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ:

Prefix 0001 default
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ

ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ способом, Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ сСлСктор Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ, Π²Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚.

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Π²Ρ‹ ΠΈΠ·Π±Π΅Π³Π°Π΅Ρ‚Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… class ΠΈΠ»ΠΈ id Π½Π° мноТСствС Ρ‚Π΅Π³ΠΎΠ² Π² вашСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. ВмСсто этого, CSS Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ эту Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… конструкциях, Π³Π΄Π΅ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π²Π°ΠΆΠ½Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свои Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π±ΠΎΠ»Π΅Π΅ эффСктивными, избСгая слоТных ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ зависят ΠΎΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ…, смотритС Tables Π½Π° страницС ссылок CSS.

ДСйствиС: ИспользованиС сСлСкторов class ΠΈ ID

  1. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ свой HTML-Ρ„Π°ΠΉΠ» ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π°Π±Π·Π°Ρ†, скопировав Π΅Π³ΠΎ ΠΈ вставив Π² Π½Π΅Π³ΠΎ.
  2. Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ id ΠΈ class  Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ копию, Π° Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id Π²ΠΎ Π²Ρ‚ΠΎΡ€ΡƒΡŽ копию, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, скопируйтС ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ вСсь Ρ„Π°ΠΉΠ» снова:
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p id="first">
          <strong class="carrot">C</strong>ascading
          <strong class="spinach">S</strong>tyle
          <strong class="spinach">S</strong>heets
        </p>
        <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  3. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свой Ρ„Π°ΠΉΠ» CSS. Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ всС содСрТимоС Π½Π°:
    strong { color: red; }
    .carrot { color: orange; }
    .spinach { color: green; }
    #first { font-style: italic; }
    
  4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ свой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:
    Cascading Style Sheets
    Cascading Style Sheets

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ строки Π² вашСм Ρ„Π°ΠΉΠ»Π΅ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ порядок Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ эффСкта.

    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ классов .carrot ΠΈ .spinach ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π½Π°Π΄ сСлСктором Ρ‚Π΅Π³Π° strong.

    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ID #first ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π½Π°Π΄ сСлСкторами класс ΠΈ Ρ‚Π΅Π³.

Π’Ρ‹Π·ΠΎΠ²Ρ‹
  1. НС измСняя свой HTML-Ρ„Π°ΠΉΠ», Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² свой CSS-Ρ„Π°ΠΉΠ» ΠΎΠ΄Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ сохраняСт всС Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎ ΠΈ сСйчас, Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ вСсь тСкст Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π°Π±Π·Π°Ρ†Π΅ синим:
    Cascading Style Sheets
    Cascading Style Sheets
  2. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ (Π½Π΅ измСняя Π½ΠΈΡ‡Π΅Π³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† синим:
    Cascading Style Sheets
    Cascading Style Sheets
Possible solution
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below:
    #second { color: blue; }
    
    A more specific selector, p#second also works.
  2. Change the selector of the new rule to be a tag selector using p:
    p { color: blue; }
    
Hide solution
See a solution for the challenge.

ДСйствиС: ИспользованиС сСлСкторов псСвдокласса

  1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ HTML-Ρ„Π°ΠΉΠ» со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ содСрТимым:
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
      </body>
    </html>
    
  2. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свой Ρ„Π°ΠΉΠ» CSS. Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ всС содСрТимоС Π½Π°:
    a.homepage:link, a.homepage:visited {
      padding: 1px 10px 1px 10px;
      color: #fff;
      background: #555;
      border-radius: 3px;
      border: 1px outset rgba(50,50,50,.5);
      font-family: georgia, serif;
      font-size: 14px;
      font-style: italic;
      text-decoration: none;
    }
    
    a.homepage:hover, a.homepage:focus, a.homepage:active {
      background-color: #666;
    }
    
  3. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ свой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ (Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт):
    ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ нашСй Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница

ДСйствиС: ИспользованиС сСлСкторов Π½Π° основС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΈ псСвдоклассов

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСкторов, основанных Π½Π° связях ΠΈ псСвдоклассах, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС каскадныС Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹. Π­Ρ‚ΠΎ обычная Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для создания чисто-CSS Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ( это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, Π±Π΅Π· использования JavaScript). Π‘ΡƒΡ‚ΡŒ этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² создании ΠΏΡ€Π°Π²ΠΈΠ»Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π°:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

для примСнСния ΠΊ структурС HTML, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ наш ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠŸΡ€ΠΈΠΌΠ΅Ρ€ CSS-основанного Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню для Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ Ρ€Π΅ΠΏΠ»ΠΈΠΊΠΈ.

Π§Ρ‚ΠΎ дальшС?

Π’Π°ΡˆΠ° Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΠ»ΠΎΡ‚Π½ΠΎΠΉ ΠΈ слоТной. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ сСкция описываСт ΠΏΡƒΡ‚ΠΈ CSS Π»Π΅Π³ΠΊΠΎΠ³ΠΎ чтСния.