Урок 4. Css селекторы.
Селекторы.
Мы уже изучили классы и идентификаторы. Так же уже обращались к элементам в css коде по их названию тэга. Кратко вспомним изученное и рассмотрим дополнительные возможности обращения к html элементам в css коде.
В css коде присвоить определенные свойства html элементам можно по названию тэга:
<head>
<style>
h1 {
color:red;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h1>Заголовок 2</h1>
</body>
В данном примере красный цвет текста будет применен ко всем элементам заключенным в тэг h1.
Для того, что бы различным группам элементов присваивать одни и те же свойства существуют классы. Пример:
<head>
<style>
.text-green {
color:green;
}
.text-red {
color:red;
}
.background-aqua {
background-color: aqua;
}
</style>
</head>
<body>
<h1 class="text-green">Заголовок зеленый</h1>
<p class="text-green">Параграф с зеленым цветом</p>
<h1 class="text-red">Заголовок красный</h1>
<p class="text-red background-aqua">Параграф с красным цветом текста и бэкграундом</p>
</body>
Обратите внимание, что одному элементу можно присвоить несколько классов через пробел. В примере такое место выделено.
Так же существуют идентификаторы:
<style>
#unique-paragraph {
color:indigo;
}
</style>
</head>
<body>
<p id="unique-paragraph">Уникальный параграф.</p>
</body>
Идентификатор должен быть обязательно уникальным на текущей странице.
Данная тема в веб разработке называется селекторы. Т.е. в будущем когда вам будет необходимо вспомнить как обратиться в css коде к тому или иному элементу или группе элементов, то в поисковике наберите «css селекторы» и вы получите странице, где как раз эта тема описана.
Рассмотрим еще два вида селекторов:
* - данный с електор применит свойства ко всем элементам на странице:
* {
padding:0;
margin:0;
}
[name="value"] – селектор на атрибут, пример:
<style>
[href="index.html"] {
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">Ссылка на главную страницу.</a>
<a href="some_page.html">Ссылка на какую то страницу.</a>
</body>
В данном примере все элементы, у который есть атрибут href и он равен ‘index.html’ не будут иметь подчеркнутый шрифт.
Сочетания селекторов.
Можно использовать следующие сочетания селекторов.
h1, p{
color: red;
}
Данный код применит красный цвет шрифта к элементам h1 и p.
.heading, .paragraph{
color: red;
}
Данный код применит свойства к классам heading и paragraph.
Следующий селектор применит свойства к картинкам, которые находятся внутри тэга p:
p img {
width: 100px;
}
Далее кратко приведены существующие селекторы. На данном этапе все их знать нет необходимости, но если вы встретите в чужом коде какую либо непонятную конструкцию селектора, то можете подсмотреть что она означает.
Краткий перечень css селекторов.
Основные виды селекторов:
* – любые элементы.
div – элементы с таким тегом.
#id – элемент с данным id.
.class – элементы с таким классом.
[name="value"] – селекторы на атрибут
:visited – «псевдоклассы», остальные разные условия на элемент
Комбинирование селекторов:
.c1.c2 – элементы одновременно с двумя классами c1 и c2
a#id.c1.c2:visited – элемент a с данным id, классами c1 и c2, и псевдоклассом visited
Отношения:
div p – элементы p, являющиеся потомками div.
div > p – только непосредственные потомки
div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div.
div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
Селекторы атрибутов
На атрибут целиком:
[attr] – атрибут установлен,
[attr="val"] – атрибут равен val.
На начало атрибута:
[attr^="val"] – атрибут начинается с val, например "value".
[attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1".
На содержание:
[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue".
[attr~="val"] – атрибут содержит val как одно из значений через пробел.
Например: [attr~="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".
На конец атрибута:
[attr$="val"] – атрибут заканчивается на val, например равен "myval".