Как работают CSS селекторы (Начинающие понятия)
В приведенных ниже примерах, CSS будет в файле с именем style.css который ссылается от HTML документа, который называется как index.html. Они представляют собой отдельные файлы с разным разрешением, и в тоже время является большая частью CSS, сохраняя дизайн в документе.
Вот то, что, будет у нас в HTML файле:
Код
<!DOCTYPE html>
<html lang="en">
<head>
<title>Мы учим селекторы!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Ура</h1>
<body>
</html>
<html lang="en">
<head>
<title>Мы учим селекторы!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Ура</h1>
<body>
</html>
И файл CSS, который будет содержать только те селекторные блоки которые вы увидите ниже.
Селектор ID
CSS
#happy-cake {
}
}
HTML
<!-- будет соответствовать -->
<div id="happy-cake"></div>
<!-- будет соответствовать -->
<aside id="happy-cake"></aside>
<!-- Не будет соответствовать -->
<div id="sad-cake">Неправильный ID!</div>
<!-- Не будет соответствовать -->
<div class="happy-cake">Это не ID!</div>
<div id="happy-cake"></div>
<!-- будет соответствовать -->
<aside id="happy-cake"></aside>
<!-- Не будет соответствовать -->
<div id="sad-cake">Неправильный ID!</div>
<!-- Не будет соответствовать -->
<div class="happy-cake">Это не ID!</div>
Информация:
ID селекторы самый мощный тип селектора в плане CSS специфики. Это означает, что они выбивают другие виды селекторов и стили, определенные в системе. Это звучит хорошо, но как правило, считается плохим, потому что, когда есть нижняя специфичность селекторов, которые легче переопределить при необходимости.
Селектор Class
CSS
.module {
}
}
HTML
<!-- будет соответствовать -->
<div class="module"></div>
<!-- будет соответствовать -->
<aside class="country module iceland"></aside>
<!-- Не будет соответствовать -->
<div class=".module">Точка является для CSS, а не для HTML</div>
<!-- Не будет соответствовать -->
<div class="bigmodule">Неправильный класс</div>
<div class="module"></div>
<!-- будет соответствовать -->
<aside class="country module iceland"></aside>
<!-- Не будет соответствовать -->
<div class=".module">Точка является для CSS, а не для HTML</div>
<!-- Не будет соответствовать -->
<div class="bigmodule">Неправильный класс</div>
Информация:
Селекторы классов ваш друг. Они, наверное, самые полезные и универсальные селекторы. Отчасти потому, что они хорошо поддерживаются во всех браузерах. Еще вы можете добавить несколько классов (только через пробел) для HTML элементов. Также есть JavaScript вещи, которые вы можете применить, специально для манипулирования классами.
Селектор тегов
CSS
h2 {
}
}
HTML
<!-- будет соответствовать -->
<h2>Привет, Мир!</h2>
<main>
<div>
<!-- будет соответствовать -->
<h2>везде</h2>
</div>
</main>
<!-- Не будет соответствовать -->
<div class="h2">Неправильный тег, нельзя его обмануть </div>
<!-- Не будет соответствовать -->
<h2class="yolo">Убедитесь, что тег имеет пробел после него!</h2>
<h2>Привет, Мир!</h2>
<main>
<div>
<!-- будет соответствовать -->
<h2>везде</h2>
</div>
</main>
<!-- Не будет соответствовать -->
<div class="h2">Неправильный тег, нельзя его обмануть </div>
<!-- Не будет соответствовать -->
<h2class="yolo">Убедитесь, что тег имеет пробел после него!</h2>
Информация:
В селекторах Тегов самое полезное, это при изменении свойства, которые являются уникальными для отдельных HTML элементов.
Например как установка стилей списков (list-style) на <ul> или размер вкладок (tab-size) на <pre>
Не полагайтесь на их слишком много, как правило, более полезно иметь класс с определенным стилем, который можно использовать на любом HTML элементе.
Селектор Атрибутов
CSS
[data-modal="open"] {
}
}
HTML
<!-- будет соответствовать -->
<div data-modal="open"></div>
<!-- будет соответствовать -->
<aside class='closed' data-modal='open'></aside>
<!-- Не будет соответствовать -->
<div data-modal="false">Неверное значение</div>
<!-- Не будет соответствовать -->
<div data-modal>Нет значения</div>
<!-- Не будет соответствовать -->
<div data-modal-open>Неправильный атрибут</div>
<div data-modal="open"></div>
<!-- будет соответствовать -->
<aside class='closed' data-modal='open'></aside>
<!-- Не будет соответствовать -->
<div data-modal="false">Неверное значение</div>
<!-- Не будет соответствовать -->
<div data-modal>Нет значения</div>
<!-- Не будет соответствовать -->
<div data-modal-open>Неправильный атрибут</div>
Информация:
Вы можете возразить, что селекторы атрибутов являются еще более полезным, чем классы, потому что они имеют одинаковое значение специфичности.
Вряд ли проблемой станет меньше, селекторы атрибутов не поддерживаются в IE 6.
Позиционные селекторы
CSS
:nth-child(2) {
}
}
HTML
<ul>
<li>Нет</li>
<!-- будет соответствовать -->
<li>да, я второй номер по счету</li>
<li>Нет</li>
</ul>
<li>Нет</li>
<!-- будет соответствовать -->
<li>да, я второй номер по счету</li>
<li>Нет</li>
</ul>
Информация:
Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = "каждый третий") вы можете выбирать элементы на основе их положения в HTML.
Другие Псевдо селекторы
CSS
:empty {
}
}
HTML
<!-- будет соответствовать -->
<div></div>
<!-- будет соответствовать -->
<aside data-blah><!-- ничего --></aside>
<!-- Не будет соответствовать -->
<div> </div>
<!-- Не будет соответствовать -->
<div>
</div>
<div></div>
<!-- будет соответствовать -->
<aside data-blah><!-- ничего --></aside>
<!-- Не будет соответствовать -->
<div> </div>
<!-- Не будет соответствовать -->
<div>
</div>
Информация:
:empty является одним из многих псевдо селекторов, который вы можете увидеть после двоеточия (:) в них. Как правило, они представляют собой нечто, что вы не могли знать всего на элементе и атрибутов в одиночку.
Заметим, что это немного отличается от псевдо элементов, которые вы можете увидеть после двойного двоеточия (: :). Они несут ответственность за добавление элементов на странице, которые они выбрали.
Ну и на закуску :)
CSS
.module.news {
/* Выбор элементов с обоими из этих классов */
}
#site-footer::after {
/* Добавляет содержимое после элемента с таким идентификатором ID */
}
section[data-open] {
/* Выбирает только элементы раздела, если у них есть этот атрибут */
}
/* Выбор элементов с обоими из этих классов */
}
#site-footer::after {
/* Добавляет содержимое после элемента с таким идентификатором ID */
}
section[data-open] {
/* Выбирает только элементы раздела, если у них есть этот атрибут */
}
Есть также селекторы комбинаторы такие как: "~" , "+" и ">" , что влияет на селекторы, таким образом:
CSS
.module > h2 {
/* Выбирает элементы h2, являющиеся прямым дочерним элемента для этого класса */
}
h2 + p {
/* Выбирает элементы р, которые непосредственно следуют в элементе h2 */
}
li ~ li {
/* Выбирает элементы li, которые являются родственные (и следующих) другой li элемент. */
}
/* Выбирает элементы h2, являющиеся прямым дочерним элемента для этого класса */
}
h2 + p {
/* Выбирает элементы р, которые непосредственно следуют в элементе h2 */
}
li ~ li {
/* Выбирает элементы li, которые являются родственные (и следующих) другой li элемент. */
}
Источник: ART-UCOZ
Поделись с друзьями:
Добавлять комментарии могут только зарегистрированные пользователи.