CSS селекторы
Стилизация с использование class
<body>
<h1>Новости</h1>
<div class="section-hot">
<h2 class="hot-header">Горячие новости</h2>
<ul>
<li class="hot-tem">
<a href="">Президент США подал в отставку</a>
</li>
<li class="hot-tem">
<a href="">Tesla 3 уже в продаже</a>
</li>
<li class="hot-tem">
<a href="">Кто победит на ЧМ по хоккею в 2018 году?</a>
</li>
<li class="hot-tem">
<a href="">Почему мы любим javascripter.by</a>
</li>
</ul>
<div class="hot-footer">4 статьи</div>
</div>
<div class="section-realty">
<h2 class="realty-header">Недвижимость</h2>
<ul>
<li class="realty-item">
<a href="">Купить квартиру теперь реально</a>
</li>
<li class="realty-item">
<a href="">Квадратный метр по 500$</a>
</li>
</ul>
<div class="realty-footer">2 статьи</div>
</div>
</body>
li {
padding: 10px;
}
.hot-tem:hover {
/*цвет фона элемента списка при наведении*/
background-color: darkolivegreen;
}
.realty-item:hover {
/*цвет фона элемента списка при наведении*/
background-color: cadetblue;
}
.hot-footer {
color: darkolivegreen;
}
.realty-footer {
color: cadetblue;
}
a:hover {
/*белый цвет текста ссылки при наведении*/
color: white;
}
h2 {
/*стилизация для всех заголовков h2*/
color: white;
padding: 10px;
}
.hot-header {
/*стилизация заголовка h2 с классом hot-header*/
background-color: darkolivegreen;
}
.realty-header {
/*стилизация заголовка h2 с классом realty-header*/
/*раскомментируй строку чтобы увидеть результат*/
/*padding: 0; !*перезатрет значение padding: 10px заданное в h2 *!*/
background-color: cadetblue;
}
Стилизация с использованием вложенности
Каждый html элемент в браузере имеет свои стили по-умолчанию, например, так это выглядит для тэга
h2:
<body>
<h1>Новости</h1>
<div class="section-hot">
<h2>Горячие новости</h2>
<ul>
<li>
<a href="">Президент США подал в отставку</a>
</li>
<li>
<a href="">Tesla 3 уже в продаже</a>
</li>
<li>
<a href="">Кто победит на ЧМ по хоккею в 2018 году?</a>
</li>
<li>
<a href="">Почему мы любим javascripter.by</a>
</li>
</ul>
<div class="footer">4 статьи</div>
</div>
<div class="section-realty">
<h2>Недвижимость</h2>
<ul>
<li>
<a href="">Купить квартиру теперь реально</a>
</li>
<li>
<a href="">Квадратный метр по 500$</a>
</li>
</ul>
<div class="footer">2 статьи</div>
</div>
</body>
li {
padding: 10px;
}
.section-hot li:hover {
/*цвет фона элемента списка при наведении*/
background-color: darkolivegreen;
}
.section-realty li:hover {
/*цвет фона элемента списка при наведении*/
background-color: cadetblue;
}
.section-hot .footer {
color: darkolivegreen;
}
.section-realty .footer {
color: cadetblue;
}
a:hover {
/*белый цвет текста ссылки при наведении*/
color: white;
}
h2 {
/*стилизация для всех заголовков h2*/
color: white;
padding: 10px;
}
.section-hot h2 {
/*стилизация заголовка h2 с классом hot-header*/
background-color: darkolivegreen;
}
.section-realty h2 {
/*стилизация заголовка h2 с классом realty-header*/
/*раскомментируй строку чтобы увидеть результат*/
/*padding: 0; !*перезатрет значение padding: 10px заданное в h2 *!*/
background-color: cadetblue;
}
В коде выше, мы имеем общий для всех тэгов h2 стиль. Переопределить его, можно раскоменнтировав
строчку нужную строчку кода, а вот как это будет выглядеть в разметке браузера.
Использование стелей глобального селектора h2:
Использование стилей для тэга h2 внутри section-realty:
То есть, мы перезаписали значение для тэга h2 внутри тэга с классом section-realty. Внутри тэга
section-hot значение для h2 останется тем же.
Используем все накопившиеся знания для изменения цвета текста ссылки при наведении на элемент
списка, для этого потребуется внести некоторые изменения:
комментируем или удаляем:
a:hover {
/*белый цвет текста ссылки при наведении*/
color: white;
}
добававляем:
li:hover a {
/*изменение цвета текста ссылки при наведении на элемент списка*/
color: white;
}
Проблемы, которые могут возникнуть при использовании глобальных селекторов
Глобальный селектор найдет все элементы в разметке и применит к ним указанный стиль из-за чего
верстка может "сломаться".
Пример
Добавим в body еще один элемент div с классом footer и div с классом widget-weather:
<div class="footer">
<ul>
<li>Главная</li>
<li>Новости</li>
<li>Контакты</li>
</ul>
</div>
<div class="widget-weather">
<ul>
<li>День</li>
<li>Утро</li>
<li>Ночь</li>
</ul>
</div>
И что мы видим? Мы должны увидеть два списка, стилизация элементов которых будет такой же, как и в
списках "Горячие новости" и "Недвижимость". Как же тогда делать, спросите вы. А сделать нужно
следующее. Для того, чтобы стиль применялся только к элементам опеределнных списков, нам потребуется
эти списки задать. А сделать это можно следующим образом:
Добавить стиль к каждому классу отдельно получив дублирование кода:
/*глобальный селектор элемента списка*/
/*li {*/
/* padding: 10px;*/
/*}*/
/*список классов только тех элементов, к которым применится стилизация элемента списка */
.section-hot li {
padding: 10px;
}
.section-realty li {
padding: 10px;
}
Тогда как избежать дублирования кода? Сделать это можно следующим образом:
Добавить стиль к списку классов:
/*глобальный селектор элемента списка*/
/*li {*/
/* padding: 10px;*/
/*}*/
/*список классов только тех элементов, к которым применится стилизация элемента списка */
.section-hot li,
.section-realty li {
padding: 10px;
}
Добавить какой-либо общий класс для элементов, к которым применится данный стиль:
<body>
<div class="section-hot section-news">
<h2>Горячие новости</h2>
<ul>
<li>
<a href="">Президент США подал в отставку</a>
</li>
<li>
<a href="">Tesla 3 уже в продаже</a>
</li>
<li>
<a href="">Кто победит на ЧМ по хоккею в 2018 году?</a>
</li>
<li>
<a href="">Почему мы любим javascripter.by</a>
</li>
</ul>
<div class="footer">4 статьи</div>
</div>
<div class="section-realty section-news">
<h2>Недвижимость</h2>
<ul>
<li>
<a href="">Купить квартиру теперь реально</a>
</li>
<li>
<a href="">Квадратный метр по 500$</a>
</li>
</ul>
<div class="footer">2 статьи</div>
</div>
</body>
/*глобальный селектор элемента списка*/
/*li {*/
/* padding: 10px;*/
/*}*/
/*список классов только тех элементов, к которым применится стилизация элемента списка */
.section-news li {
padding: 10px;
}
И мы видим, что стили для элемента li применились только в списках "Горячие новости" и
"Недвижимость". А списки в добавленных нами элементах не изменились.
Чтобы избежать использования глобальных селекторов в нашем примере, изменим наш код следующим
образом:
.section-news li:hover a {
/*белый цвет текста ссылки при наведении*/
color: white;
}
.section-news h2 {
/*стилизация для всех заголовков h2*/
color: white;
padding: 10px;
}
Ошибки, которые могут возникнуть при работе со вложенностью
Добавим с index.html внутри тэга <head></head> следующую строку, для того чтобы подключить еще
один файл со стилями.
<link rel="stylesheet" type="text/css" href="main.css" />
Разметку section-hot и section-realty обернем в общий div с классом news-content .
В файле main.css добавим стили для класса .footer.
.footer {
color: white;
background-color: black;
}
Мы должны увидеть, что данный стиль применился для всех элементов с классом .footer. Как же нам от
этого избавиться?
Вариант1
Использование одного общего класса для обоих блоков.
.section-news .footer {
color: white;
background-color: black;
}
Вариант 2
Использование родительского класса и общего класса для обоих блоков.
.news-content .section-news .footer {
background-color: #fff;
}
Вариант 3
Использование только родительского класса.
.news-content .footer {
background-color: #fff;
}
Добавьте элемент с классом .footer внутрь родительского тега .news-content и посмотрите что
получится.
<div class="footer">лучше использовать больше вложенностей для большей точности</div>
Стиль применится и к этому элементу, а если нам это не нужно? Поэтому лучше использовать больше
вложенностей, для большей точности.
Еще один пример работы вложенностей:
Вариант 4
Использование родительского и общего класса, а так же класса каждого элемента по отдельности.
/*общий случай*/
.news-content .section-news .footer {
background-color: #fff;
}
/*частный случай дожен находиться ниже общего*/
.news-content .section-hot .footer {
background-color: #d123;
}
.news-content .section-realty .footer {
background-color: #d123;
}
Поменяй частный и общий случай местами и посмотри на получившийся результат
