Селектор типа | CSS селектор
Поддержка браузерами
Описание
Селектор типа определяет HTML-элементы, к которым будет применен стиль. Следующее правило, к примеру, задает синий цвет текста для всех заголовков первого уровня:
h2 { color: blue; }
Примечание: как видно из примера, в имя селектора не входят символы < и >, в которые заключены соответствующие элементы. Поэтому, когда вы пишите стиль для элемента <h2>, то набираете только его название — h2.
При использовании селектора типа, стиль будет применен ко всем элементам указанного типа, не зависимо от их уровня вложенности.
Совет: селектор типа является простым селектором, применяющим стиль только к группе элементов определенного типа. В случае, если вам нужно выбрать не все элементы определенного типа, а только один, часть из них или выбрать элементы, относящиеся к разным типам, то стоит воспользоваться селектором класса. Он позволяет выбирать элементы независимо от того, к какому типу они относятся.
Пример:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h2> Добро пожаловать! </h2>
<div>
<p> Меня зовут Арни. </p>
<p> Я играю в онлайн игры. </p>
</div>
<p> Моего кота тоже зовут Арни. </p>
</body>
</html>
Результат данного примера
Добро пожаловать!
Меня зовут Арни.
Я играю в онлайн игры.
Моего кота тоже зовут Арни.
Соседние селекторы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
<p>Lorem ipsum <b>dolor</b> sit amet.</p>
Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Соседние селекторы</title>
<style>
b + i {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).
Селекторы CSS
В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:
1) Обычный селектор.
2) Контекстный селектор.
3) Селектор ID.
4) Селектор CLASS.
5) Селектор параметров.
Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.
А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере
<div><h3>Заголовок в контейнере</h3></div>Элемент, в данном случае — это текст «заголовок в контейнере» лежит в теге <h3>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:
тег1 тег2 {
свойство1: значение1;
свойство2: значение2;
}И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.
div h3 {
font-weight: bold;
}Такой стиль будет применён к примеру выше и «заголовок в контейнере» станет жирным. А если будет написано просто:
<h3>Заголовок</h3>То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.
Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>
Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:
имятега#имя {
свойство1: значение1;
свойство2: значение2;
}Теперь если тегу «имятега» имеет атрибут «id» со значением «имя«, то к элементам внутри тега «имятега» будет применён стиль.
Если «имятега» отсутствует (то есть селектор начинается с символа «#»), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут «id» в значении «имя«.
А теперь пример:
#red {
color: red;
}И теперь HTML-код, к которому будет применён данный стиль:
<p id = "red">Красный текст</p> Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:
<p id = "red">Красный текст</p>
<p id = "red">Ещё один красный текст</p>В таких случаях надо создавать два идентификатора вот так:
#red1, #red2 {
color: red;
}И HTML-код:
<p id = "red1">Красный текст</p>
<p id = "red2">Ещё один красный текст</p>Вот теперь будет правильно. Кстати, обратите внимание на «запятую» в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.
Теперь о селекторе CLASS. Он очень похож на селектор ID, но его «имя» может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:
имятега.имя {
свойство1: значение1;
свойство2: значение2;
}Таким образом, если у тега «имятега» стоит атрибут «class» со значением «имя«, то к элементам внутри будет применён данный стиль.
Аналогично, с селектором ID, если «имятега» не задано (то есть описание селектора начинается с символа «.»), то данный стиль может быть присвоен любым элементам.
А теперь пример:
.red {
color: red;
}И HTML-код под этот стиль:
<p class = "red">Красный текст</p>
<p class = "red">Ещё один красный текст</p>Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.
И последний тип селекторов CSS — это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий
имятега[имяатрибута="значениеатрибута"] {
свойство1: значение1;
свойство2: значение2;
}Применяется данный стиль в следующем случае: если в теге «имятега» значение «имяатрубита» равно «значениеатрибута» то будет применён стиль, в противном случае стиль не применяется.
Чтобы стало ещё понятнее, привожу пример:
input[type="submit"] {
border: 2px double black;
}И HTML:
<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:
#header li a {
font-size: 150%;
}И HTML-код, который вызовет этот стиль:
<ul id = "header">
<li>
<a href = "http://myrusakov.ru">Текст с размером 150%</a>
</li>
</ul>Думаю, что и здесь вопросов не возникнет.
Напоследок хочется сказать, что селекторы — это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы — это уже зависит только от Ваших дизайнерских навыков.
-
Создано 21.07.2010 20:44:56 -
Михаил Русаков
Создано 21.07.2010 20:44:56
Михаил РусаковЕсли у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
дочерние, смежные, селекторы потомков и другие типы.
Что такое селекторы
Повторим немного то, что уже раскрывалось в теме «Синтаксис CSS». Итак, селектор — это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS.Пример правила CSS:
Рис.2. Пример правила CSS.Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки — {}
- Свойство и значение в объявлении разделяются двоеточием — :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой — ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
<html>
<head>
<title>Синтаксис CSS</title>
<style>
h2 { color: blue; font-size: 16pt; text-align: center; }
</style>
</head>
<body>
<h2>Привет!</h2>
<h3>Заголовок h3!</h3>
</body>
</html>Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков <h2>, <h3> и <h4> были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
<html>
<head>
<title>Группирование в CSS</title>
<style>
h2, h3, h4 { color: blue; text-align: center; }
</style>
</head>
<body>
<h2>Привет h2!</h2>
<h3>Заголовок h3!</h3>
</body>
</html>Такая запись стиля равносильна следующей группе правил:
<style>
h2 { color: blue; text-align: center; }
h3 { color: blue; text-align: center; }
h4 { color: blue; text-align: center; }
</style>Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам <p> внутри таблицы <table> красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:
<!DOCTYPE html>
<html>
<head>
<title>Селекторы потомков в CSS</title>
<style>
table p { color: red;}
</style>
</head>
<body>
<table><tr><td>
<h2>Привет!</h2>
<p>Текст абзаца в таблице.</p>
<div><p>Текст абзаца в таблице (в контейнере div).</p></div>
</td></tr></table>
<p>Текст абзаца вне таблицы.</p>
</body>
</html>Все теги <p> во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег <p> находящийся внутри тега <div> тоже отображает текст красным цветом.
На самом деле, вместо <table> можно было указать тег <td>, так как тег <table> всегда должен содержать тег <td>.
Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.
Дерево документа
Дерево документа (англ. document tree) — это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:
Дерево документа.Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.
Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.
<!DOCTYPE html>
<html>
<head>
<title>Дерево документа.</title>
<style>
p { color: red;}
</style>
</head>
<body>
<h2>Привет!</h2>
<p>Текст <em>абзаца</em> и <strong>жирный</strong>.</p>
<ul>
<li>
<ul>
<li>Пункт 1.1</li>
<li>Пункт 1.2</li>
<li>Пункт 1.3</li>
</ul>
</li>
<li>
<ol>
<li>Пункт 2.1</li>
<li>Пункт 2.2</li>
<li>Пункт 2.3</li>
</ol>
</li>
</ul>
<p>Текст абзаца с <a href="/">ссылкой</a>.</p>
</body>
</html>Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией «семейные» термины.
Теперь рассмотрим все типы связей.
Предки и потомки
Предки (ancestor) — элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов.
Потомки (descendant) — элементы, вложенные в другой элемент.
Селекторы потомков уже были рассмотрены выше.
Родители и дочерние элементы
Родитель (parent) — это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child — ребёнок) — это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.
В нашем дереве элементов у тега <body> следующие дочерние элементы: <h2>, <p>, <ul> и ещё один <p>.
Братские или сестринские элементы
Братские или сестринские элементы, (англ. siblings — братья и сестры), группа элементов имеющая общего родителя. Например, теги <h2>, <p>, <ul> и второй <p> — сестринские, так как у них общий родитель <body>.
Смежные элементы
Смежные элементы — это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары: <h2> и <p>, <p> и <ul>, <ul> и <p>.
Теперь вернёмся к селекторам.
Дочерние селекторы
Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ «>».
<!DOCTYPE html>
<html>
<head>
<title>Дочерние селекторы в CSS</title>
<style>
td > p { color: red;}
</style>
</head>
<body>
<table><tr><td>
<h2>Привет!</h2>
<p>Текст абзаца в таблице.</p>
<div><p>Текст абзаца в таблице (в контейнере div).</p></div>
</td></tr></table>
<p>Текст абзаца вне таблицы.</p>
</body>
</html>HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере <div> уже не красного цвета, так как для этого абзаца тег <div> родитель, а тег <td> предок.
Читайте подробнее: дочерние селекторы.
Смежный (соседний) селектор
Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак «+» и за ним селектор выбираемого элемента.
Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами <h3>, желательно увеличить верхний отступ (свойство margin-top). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег <h3> идёт сразу после <h2>, а это может быть в начале статьи, вержний отступ над тегом <h3> будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора смежного элемента.
<!DOCTYPE html>
<html>
<head>
<title>Смежный селектор в CSS</title>
<style>
h3 { margin-top: 50px; }
h2+h3 { margin-top: 0px; }
</style>
</head>
<body>
<h2>Привет!</h2>
<h3>Заголовок h3</h3>
<p>Текст абзаца в про невероятные приключения.</p>
<h3>Заголовок h3</h3>
<p>Текст абзаца в про невероятные приключения.</p>
</body>
</html>Другое название смежных селекторов: соседние селекторы, тут можно прочитать подробнее про этот тип селекторов.
Родственный селекторы
Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак «~» (тильда) и за ним селектор выбираемых элементов.
Пример исользования сестринского селектора.
<!DOCTYPE html>
<html>
<head>
<title>Селектор родственного элемента в CSS</title>
<style>
h2~p { color: red; }
</style>
</head>
<body>
<h2>Привет!</h2>
<p>Текст абзаца №1 в про невероятные приключения.</p>
<p>Текст абзаца №2 в про невероятные приключения.</p>
<div>Текст div №1 в про невероятные приключения.</div>
<p>Текст абзаца №3 в про невероятные приключения.</p>
</body>
</html>Из примера видно, что после <div> тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом.
Читайте подробнее: родственные селекторы.
Универсальный селектор
Если в селекторе правила CSS указан символ «*», то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет «обнулить» все внешние и внутренние отступы. Тогда нужно использовать такой стиль:
* {
margin: 0;
padding: 0;
}Но символ «*» можно использовать в составных селекторах.
ul * {color: red}Этот код назначает красный цвет тексту всех потомков элемента <ul>.
Классы
Классы в CSS — самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:
Тег.Имя класса { свойство1: значение; свойство2: значение; … }
В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов <ul>, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top, ul.menu и ul.menu-bottom.
В теле html-документа различные меню создаются с указанием класса в атрибуте class:
<ul> … </ul>
<ul> … </ul>
<ul> … </ul>
Классы — часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.
Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.
*.Имя класса { свойство1: значение; свойство2: значение; … }
Эту запись можно сократить, убрав символ «*».
.Имя класса { свойство1: значение; свойство2: значение; … }
Читайте подробнее: классы CSS.
ID селекторы (идентификаторы)
Идентификаторы — это типы селекторов, задающие уникальное имя элемента. Уникальное — значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение — обращение к ним при помощи скриптов.
При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.
#Имя идентификатора { свойство1: значение; свойство2: значение; … }
Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Читайте подробнее: CSS: идентификаторы id.
Селекторы атрибутов
В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег <input> зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input, то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.
Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение.
Селекторы атрибутов — тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.
Псевдоклассы
Ещё одна большая тема в CSS — псевдоклассы. Приставка «псевдо» обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.
При помощи псевдоклассов создаются динамические эффекты на странице.
Синтаксис псевдокласса:
Селектор:псевдокласс { свойство1: значение; свойство2: значение; … }
Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color: green}).
Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS — это зарезервированные слова.
Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover — курсор мыши просто наведён на элемент, например на ссылку.
Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.
Псевдоэлементы
При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html — первую букву со своим стилем отображения.
Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья.
Синтаксис псевдоэлементов такой же, как и у псевдоклассов:
Селектор:псевдоэлемент { свойство1: значение; свойство2: значение; … }
Родственные селекторы | CSS | WebReference
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.
Здесь красный цвет текста будет установлен для всех абзацев.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<div><p>Абзац 2</p></div>
<p>Абзац 3</p>Синтаксис ?
E ~ F { Описание правил стиля }Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует после него.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
img {
display: none;
}
#switch:checked ~ img {
display: block;
}
</style>
</head>
<body>
<form>
<input type="checkbox">
<label for="switch">Показать картинки</label>
<img src="image/thumb1.jpg" alt="">
<img src="image/thumb2.jpg" alt="">
<img src="image/thumb3.jpg" alt="">
</form>
</body>
</html>В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 23.05.2018
Редакторы: Влад Мержевич
Дочерние селекторы | CSS | WebReference
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений элементов документа между собой (рис. 1).
Рис. 1. Дерево элементов
На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к <div> выступает элемент <p>. Вместе с тем <strong> не является дочерним для элемента <div>, поскольку он расположен в контейнере <p>.
Синтаксис ?
E > F { Описание правил стиля }Стиль применяется к элементу F, только когда он является дочерним для элемента E.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Дочерние селекторы</title>
<style>
#menu {
margin: 0; padding: 0; /* Убираем отступы */
}
#menu > li {
list-style: none; /* Убираем маркеры списка */
width: 100px; /* Ширина элемента в пикселах */
background: #b3d9d2; /* Цвет фона */
color: #333; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
float: left; /* Располагаем элементы по горизонтали */
}
li > ul {
list-style: none; /* Убираем маркеры списка */
margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
border-bottom: 1px solid #666; /* Граница внизу */
padding-top: 5px; /* Добавляем отступ сверху */
}
li > a {
display: block; /* Ссылки отображаются в виде блока */
font-weight: normal; /* Нормальное начертание текста */
font-size: 90%; /* Размер шрифта */
background: #fff; /* Цвет фона */
border: 1px solid #666; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul>
<li>Правка
<ul>
<li><a href="undo.html">Отменить</a></li>
<li><a href="cut.html">Вырезать</a></li>
<li><a href="copy.html">Копировать</a></li>
<li><a href="paste.html">Вставить</a></li>
</ul>
</li>
<li>Начертание
<ul>
<li><a href="bold.html">Жирное</a></li>
<li><a href="italic.html">Курсивное</a></li>
<li><a href="underline.html">Подчеркнутое</a></li>
</ul>
</li>
<li>Размер
<ul>
<li><a href="small.html">Маленький</a></li>
<li><a href="normal.html">Нормальный</a></li>
<li><a href="middle.html">Средний</a></li>
<li><a href="big.html">Большой</a></li>
</ul>
</li>
</ul>
</body>
</html>В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться. Результат примера показан на рис. 2.
Рис. 2. Использование дочерних селекторов
Примечание
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (li > /* больше */ a).
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Селекторы в CSS
Селекторы в CSS
CSS – каскадные таблицы стилей.
Внимание! У Вас нет прав для просмотра скрытого текста.
Мир CSS – это волшебный мир бесконечного комбинирования свойств и внешнего вида (стилей) HTML-объектов и элементов. И, самое главное действующее лицо на этом «празднике жизни» CSS – это селектор CSS.
- Селекторы в CSS – термины и определения
- Селектор в CSS – «мыслью по древу»
- Зачем нужен селектор в CSS
- Глобальные свойства в CSS
(жизнь без селекторов) - Что такое селектор в CSS
- Селекторы в CSS | Примеры и комментарии
Селекторы в CSS – термины и определения
Как известно, стили (внешний вид и свойства) HTML-элементов
могут быть встроенными, внутренними и внешними.
- Встроенные стили
- Встроенные стили указываются напрямую в HTML-тегах и с ними, пожалуй – проще всего. Действие встроенных стилей распространяется исключительно на тот HTML-элемент, в открывающий тег которого он вставлен (встроен). Например, вот такой код: <span>text</span> – создаст красный фон только внутри элемента span и не более того. Результат – text
- Внутренние стили
- Внутренние стили указываются в виде отдельно стоящего кода, который может располагаться в исходном коде веб-страницы, где только ему не заблагорассудится – в начале страницы, в её конце или посредине. Пример кода внутреннего стиля:
<style type=»text/css»>
span{background:red;}
a{color:blue;}
</style> - Внешние стили
- Самый сложный вариант – это внешние стили. В случае использования внешних стилей, код каждого стиля записывается во внешнем файле с расширением «.css». Таких файлов может быть несколько и находится они могут где угодно, даже на другом сайте.
В отличие от встроенного стиля, действие кода внутреннего и внешнего стилей распространяется сразу на всю веб-страницу. При этом, на поле самой веб-страницы может находиться огромное количество различных похожих HTML-элементов. Чтобы точно указать браузеру к какому элементу относится тот или иной стиль, в технологии CSS применяются классы, псевдоклассы, идентификаторы и селекторы. Таким образом, «селектор в CSS» – это служебный символ для описания элемента или группы элементов, к которым применяется указанное правило стиля.
Прим. Справедливости ради нужно отметить, что такие вещи, как – классы и идентификаторы – относятся больше в HTML-коду, нежели к CSS-стилям. И только «CSS-селекторы» и псевдоклассы – это истинно CSS-наработка. О чём, собственно и речь.
Селектор в CSS – «мыслью по древу»
Исходя из вышесказанного, для себя лично, я так определил понятие термина «селектора в CSS»:
«селектор в CSS» – это служебный знак, который сообщает браузеру, где и как применить указанный стиль HTML-элемента.
Как и в обычной жизни, селектор в CSS обозначает всего лишь банальный выбор HTML-элемента для последующего назначения ему стиля (внешнего вида, свойств и т.д.).
Зачем нужен селектор в CSS
Селектор в CSS – это, своего рода – связующее звено между кодами CSS и HTML. Установив селектор (сделав выбор элемента), мы указываем браузеру место, объект и правила для применения прописанных CSS-свойств (стилей). Чтобы перейти от зауми к практике, наверное, будет уместно вспомнить про жизнь в CSS без селекторов.
Глобальные свойства в CSS
(жизнь без селекторов)
Жизнь без селекторов возможна! Но, разве это жизнь? Без селекторов, каскадные таблицы стилей (CSS) полностью теряют свой смысл. Во-первых, в имя класса без селектора возможно записать только имя реального тега HTML из реальной существующей спецификации HTML. Во-вторых, такая запись будет распространяться абсолютно на все теги с указанным именем на HTML-странице, которые только там найдутся.
Например, запись вида:
- a{background:#000;}
- – закрасит в чёрный цвет все ссылки на странице
- table{background:#000;}
- – закрасит в чёрный цвет все таблицы на странице
- div{background:#000;}
- – закрасит в чёрный цвет все блоки (div-ы) на веб-странице, и т.д.
Короче, все прописанные CSS-стили и свойства будут применяться не выборочно, а глобально, распространяясь в своём действии сразу на все теги страницы…
Безусловно, в такой записи без селекторов есть своя прелесть. Ведь, именно так, в CSS объявляются глобальные стили для всех HTML-объектов. Самый распространённый пример объявления глобальных свойств – это кроссбраузерный сброс отступов (маржинов и паддингов). Его код в CSS выглядит, примерно так: html,body,div,ul,li,dl,dt,h2,h3,h4,h5,h5,h6{margin:0;padding:0;}, хотя могут быть и другие варианты. Другой популярный пример глобальных настроек (стилей), действующих на все HTML-объекты на странице – это кроссбраузерное форматирование новых HTML5-тегов: header,section,footer,aside,nav,article{display:block;}. Тут, опять-таки, тоже возможны другие варианты.
Однако, в любом случае – всё это будут глобальные стили CSS, установленные для всего веб-документа – свойства, распространяющиеся абсолютно на все указанные теги и элементы страницы HTML. А вот, чтобы настройки CSS подействовали только на указанный нужный элемент или группу элементов HTML – потребуется селектор.
Что такое селектор в CSS
Подведём итоги.
Первое. Код самого HTML-элемента и код его стиля могут находиться в разных местах веб-страницы, сайта и даже на разных сайтах.
Второе. Чтобы обозначить HTML-элемент, ему присваивается класс или идентификатор, код которого добавляется в код HTML-элемента.
Третье. Чтобы связать код HTML-элемента и код его стиля – в CSS используют селекторы. Селектор – это специальный символ, который записывается перед именем класса или идентификатора в тексте стиля и создаёт правило для его обработки браузером. Таким образом, селектор в CSS – это своеобразный маркёр, создающий связь между каждым конкретным HTML-элементом и его стилем и задающим правило обработки этой связи.
Прим. Конечно-же, если это внешний файл CSS, то он должен быть подключён в HTML-документ, иначе «до лампочки» все селекторы. Для подключения внешнего файла CSS, в секцию <head> HTML-документа нужно добавить строку, вида:
<link rel=»stylesheet» type=»text/css» href=»my.css» />, где my.css – путь к нашему файлу с расширением «.css».
Селекторы в CSS на tehnopost.info
- Селектор в CSS – термины и определения
- Селектор в CSS – «мыслью по древу»
- Зачем нужен селектор в CSS
- Глобальные свойства в CSS
(жизнь без селекторов) - Что такое селектор в CSS
- Селекторы в CSS | Примеры и комментарии