||
Все селекторы по классам
HTML для начинающих - playlist
HTML –>: селекторы по классам
<h1 class=”center”>Стиль</h1>
css –>: селекторы по классам
.center {
color: #33CCFF;
font-family: sans-serif;
}
HTML –>: селекторы по id (идентификатор)
<p id=”center”>Добро</p>
css –>: селекторы по id (идентификатор)
#center {
color: #33CCFF;
font-family: sans-serif;
}
Универсальные селекторы CSS
Универсальные селекторы CSS обозначаются обыкновенной звездочкой “*”. Под звездочкой может подразумеваться любой элемент разметки HTML-страницы.
* {
font-size: 16px;
}
CSS селекторы по названию тега Запись селекторов по тегам также не представляет из себя никакой сложности. Выглядит она следующим образом:
h1 {
color: red;
}
где h1 - селектор по названию тега.
CSS селекторы по классам
Следующими в нашем списке видов селекторов CSS идут селекторы по классам. Напомним,, что “class” - это атрибут HTML-тега, он очень удобен тем, что может применяться к однотипным элементам. Название класса может быть каким угодно, главное, чтобы оно соответствовало тому элементу, который описывается CSS-правилом. Вообще атрибут “class” считается самым главным инструментом CSS.
При создании CSS-правила точка “.” перед именем класса обязательна.
.main-header {
background-color: #99ffcc;
}
CSS селекторы по id
К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:
#heading {
font-size: 35px;
}
CSS селекторы по атрибутам Далее будут рассмотрены CSS селекторы по атрибутам HTML-тегов. Их запись также не представляет особой сложности:
a[href = “https://loftblog.ru/”] {
color: black;
}
CSS селекторы потомков, или контекстные селекторы Под CSS селекторами потомков, или контекстными селекторами подразумевается ситуация, когда один элемент HTML-страницы вложен в другой, причем не обязательно он должен быть первым потомком.
.wraping p {
padding: 15px;
}
Дочерние селекторы CSS Дочерние селекторы CSS отличаются от селекторов потомков тем, что под дочерним подразумевается только первый потомок, никакие “внуки” и “правнуки” не попадают в эту категорию.
.wraping>p {
`padding: 15px;
}
Сестринские, или соседние селекторы CSS При помощи сестринского селектора создается CSS-правило для HTML-элементов, расположенных на одном уровне, причем тот элемент, который записывается как сестринский должен быть самым ближайшим из себе подобных к тому элементу, к которому он записывается в “сестры”.
h1 + p {
padding-bottom: 30px;
}
CSS селекторы псевдоклассов К селекторам псевдоклассов относятся селекторы CSS, которые описывают состояния элементов при совершении над ними какого-либо действия. Это могут быть наведение на элемент курсора мыши, клик по элементу и т.п. Записываются они через двоеточие к элементу, к которому применяются.
a:hover {
text-decoration: none;
}
CSS селекторы псевдоэлементов И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.
p::first-letter{
color: red;
}