Selectors — class and id · Селекторы — класс и id
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
Three kinds of selector
- A selector says which elements a rule changes.
- By tag:
p { ... }changes every<p>. - That is the kind you used last lesson.
Русский
Три вида селекторов
- Селектор указывает, какие элементы изменяет правило.
- По тегу:
p { ... }меняет все<p>. - Именно этот вид вы использовали на прошлом уроке.
English
By class and by id
- By class:
.note { ... }changes every element withclass="note". A dot.means class. - By id:
#title { ... }changes the one element withid="title". A hash#means id. - A class can be on many elements; an id should be on one.
Русский
По классу и по ID
- По классу:
.note { ... }меняет каждый элемент сclass="note". Точка.означает class (класс). - По ID:
#title { ... }меняет один элемент сid="title". Решетка#означает id (идентификатор). - Класс может быть у многих элементов; ID должен быть только у одного.
<style>
.note { color: green; }
#title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>
English
Common mistakes
- A class selector starts with
., an id selector with#. - Reuse a class on many elements; an id appears once per page.
Русский
Распространенные ошибки
- Селектор класса начинается с
., селектор ID — с#. - Переиспользуйте класс на многих элементах; ID появляется один раз на страницу.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
Русский
Теперь попробуйте сами
- Совместите точку
.с классом, а решетку#с ID. - Стилизуйте класс, а затем стилизуйте ID.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · Стилизовуйте заметку. Добавьте правило для класса note: .note { color: green; } (точка означает класс).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · Стилизуйте заголовок. Добавьте правило для ID ⟨title⟩: #title { color: purple; } (решётка означает id).