В данном уроке мы с вами научимся более продвинутой работе с селекторами CSS.
В предыдущих уроках мы с вами использовали только один тип селекторов - имя тега, по которому мы обращались ко всем таким тегам.
Однако, чаще всего нам нужны более точные способы обращения: к примеру, мы хотим выбрать не все абзацы, а только некоторые из них.
Способы сделать это мы и будем изучать в данном уроке.
Однако, для начала разберем два тега, которые пригодятся нам в дальнейшем.
Блок . Тег div
Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Для примера покрасим содержимое тега div в красный цвет (используя атрибут style):
<div style="color: red;">
<h2>
Lorem ipsum dolor sit amet.
</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
В настоящее время тег div является одним из основных строительных элементов на сайте. Вы еще столкнетесь с ним в дальнейшем много раз.
Блок . Тег span
Тег span является контейнером для кусочка текста. Вы уже знаете, что для того, чтобы сделать, к примеру, жирный текст - следует использовать тег b. Однако, что делать, если я хочу покрасить кусочек текста в красный цвет? Для такого случая тега, подобного тегу b, не существует.
Для этого и предназначен тег span - сам по себе он абсолютно ничего не делает, но для него можно применить CSS стили, которые позволят нам добавить нужный эффект к кусочку текста.
Давайте покрасим некоторый текст в красный цвет:
<p>
Lorem ipsum <span style="color: red;">dolor</span> sit amet.
</p>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Мы с вами изучили два необходимых нам тега и теперь приступаем к изучению более сложной работы с селекторами.
Блок . Группировка селекторов
Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h2, h3 и абзацы в красный цвет. В этом случае вам придется написать что-то вроде такого:
h2 {
color: red;
}
h3 {
color: red;
}
p {
color: red;
}
Однако, существует способ сделать это немного короче: селекторы тегов можно объединять через запятую и CSS код применится к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:
h2, h3, p {
color: red;
}
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<p>
Абзац с текстом.
</p>
Так код будет выглядеть в браузере:
Заголовок h2
Заголовок h3
Абзац с текстом.
Группировать через запятую можно любое количество селекторов тегов, пробел после запятой не имеет значения, можно без него, но с ним код более красивый.
Блок . Вложенность тегов друг в друга
Представим теперь ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h2.
Это делается с помощью так называемого контекстного селектора, который позволяет обращаться к тегам по их вложенности в другие теги.
Чтобы показать вложенность, между селекторами следует поставить пробел (этот пробел и есть знак контекстного селектора).
Например, так - p i - мы обратимся ко всем тегам i, находящимся внутри p, p b - так ко всем тегам b внутри p, а так - div p b - ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.
В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h2) красными не станут:
div p {
color: red;
}
<div>
<h2>
Заголовок h2 внутри тега div.
</h2>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац внутри тега div.
Абзац вне тега div.
Блок . Выбор элемента по уникальному id
Следующий способ может вам понадобится в такой ситуации: вам необходимо для всех абзацев поставить красный цвет, а конкретно для этого абзаца - зеленый. В этом случае, как вы уже знаете, можно воспользоваться атрибутом style, однако этот способ не самый оптимальный (он захламляет HTML код CSS кодом).
Второй способ заключается в том, что нужному элементу дается атрибут id, который содержит в себе уникальное имя нашего тега (другого id с таким именем на странице быть не должно - будет конфликт). Если мы дадим ему, к примеру, имя test, тогда в CSS мы сможем обратиться к нему таким образом: #test - то есть сначала пишется символ "решетка", а затем - то имя, которое мы записали в атрибут id.
Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id="test" - зеленый:
p {
color: red;
}
#test {
color: green;
}
<p id="test">
Абзац с атрибутом id в значении "test".
</p>
<p>
Обычный абзац с текстом.
</p>
<p>
Обычный абзац с текстом.
</p>
Так код будет выглядеть в браузере:
Абзац с атрибутом id в значении "test".
Обычный абзац с текстом.
Обычный абзац с текстом.
А теперь атрибут id дадим конкретному диву и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:
#test {
color: red;
}
<div id="test">
<h2>
Заголовок h2 внутри #test.
</h2>
<h2>
Заголовок h2 внутри #test.
</h2>
<h2>
Заголовок h2 внутри #test.
</h2>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
<p>
Абзац внутри #test.
</p>
</div>
<p>
Абзац вне #test.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 внутри #test.
Заголовок h2 внутри #test.
Заголовок h2 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h2 в данном случае) из #test стали красного цвета:
#test p {
color: red;
}
<div id="test">
<h2>
Заголовок h2 внутри #test.
</h2>
<h2>
Заголовок h2 внутри #test.
</h2>
<h2>
Заголовок h2 внутри #test.
</h2>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
<p>
Абзац внутри тега div.
</p>
</div>
<p>
Абзац вне тега div.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 внутри #test.
Заголовок h2 внутри #test.
Заголовок h2 внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац внутри #test.
Абзац вне #test.
Блок . Классы элементов
Обращение к элементу по его id имеет некоторый недостаток - так мы можем обратиться только к одному элементу на странице. А что делать, если нам, к примеру, нужны абзацы двух типов - красные и зеленые и они могут чередоваться в произвольном порядке? В этом случае гораздо удобнее будет воспользоваться классами.
Классы задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице. То есть, если элементы должны вести себя одинаково - мы даем им один и тот же класс.
Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом - .test - вначале символ "точка" и потом имя класса из атрибута class.
В примере ниже и абзацы, и заголовки имеют один и тот же класс test, который красит эти элементы в красный цвет:
.test {
color: red;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Определенный тег с заданным классом
Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h2 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h2 с этим же классом.
В этом случае вместо селектора .test я должен написать следующее: p.test - таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h2.test - то выберу все заголовки h2 с классом test, не затронув абзацев.
В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом - не станут:
p.test {
color: red;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Итак, еще раз: p.test - такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.
Давайте теперь выберем только h2 с классом test:
h2.test {
color: red;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h2 с классом test красились в красный цвет, а абзацы с этим классом - в зеленый:
.test {
font-style: italic;
}
h2.test {
color: red;
}
p.test {
color: green;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p class="test">
Абзац с классом test.
</p>
<p>
Абзац без класса.
</p>
Так код будет выглядеть в браузере:
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Заголовок h2 с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац с классом test.
Абзац без класса.
Блок . Видео
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке (вам нужно именно про селекторы, пару видосов там лишние. Хотя они тоже лишними не будут) ).