Справка:css/селекторы

Селектор class

Классы применяются, когда необходимо задать разные стили для одного тега или просто определить стиль для элемента веб-страницы. При использовании совместно с тегами синтаксис для классов будет следующий:

Элемент.КЛАСС { Правила стиля ... }

Используется класс стиля путем указания атрибута class с заданным значением у элементов заданного типа. К примеру, если класс и именем «с1» создан для абзаца (элемент «p»), то его нельзя использовать для форматирования, к примеру, заголовков.

Листинг: Использование классов стиля

p { /* стиль обычного абзаца */
    text-align justify;
}				 
p.cite { /* создание класса альтернативного стиля абзаца */
    text-align justify;
    font-style italic;
    font-sise 8pt;
    color #999999;
}			   
 
...
<!-- использование класса -->
<p class="cite">Селекторами называют ... </p>

Существует так же возможность создать класс стиля не привязанный к конкретному типу элемента. При создании такого стиля просто не указывайте тип элемента, к которому его можно применить:

.КЛАСС { Правила стиля ... }

Таким образом, класс получится универсальным и может быть применен с одинаковым успехом как для абзацев, так и для заголовков и для остальных текстовых элементов страницы.

Что бы присвоить блоку несколько классов напишите их через пробел, например:

<div class="a b c">
Блок с 3-я классами<div>

Виды селекторов[править]

Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
Универсальный селектор, который обозначается символом и применяется для изменения необходимых свойств всех элементов на странице.
Классы, применяются для элементов с атрибутом и необходимым значением.
Идентификаторы, применяются для элементов с атрибутом и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript).
Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (, , , , ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа (, ), а также позволяют генерировать и стилизовать несуществующее содержимое (, и свойство ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (, , , ).
Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a).
Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Часть 2. Селекторы атрибутов

Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.

Селектор наличия атрибута

Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках () в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.

E { .... }

 { .... }

В первом случаи стиль применяется к тегу в которых определён атрибут . Во втором случаи,стиль применяется ко всем тегам, внутри которых добавлен указанный атрибут.


p { 
   font-weight: 600;
}

В теге данного абзаца задан пользовательский атрибут

В теге данного абзаца задан пользовательский атрибут НО он ПУСТОЙ

Атрибут со значением

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.

E { .... }

 { .... }

Для идентификации элемента с определённым и точно заданным значением может быть использован тот же селектор что и раньше, однако на этот раз внутри квадратных скобок после имени атрибута включают желаемое значение. Внутри квадратных скобок должно быть имя атрибута, далее знак равно (), а потом кавычек, где и пишется желаемое значение атрибута.

a[href="https://yandex.ru"] {
    background-color: yellow; 
}

Яндекс

Значение атрибута содержит указанный текст

Когда мы пытаемся найти элемент на основе части значения атрибута, для не точного совпадения, может быть использован символ звёздочки () в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.

E { .... }

 { .... }

При этом мы можем точно и не знать, в каком месте значения части текста атрибута находится — в начале, середине или конце.

a {
    font-weight: 600; 
}

Значение атрибута начинается с определённого текста

В дополнение к выбору элемента на основе того, что значение атрибута содержит указанный текст, можно также выбрать элемент, основанный на том, с чего начинается значение атрибута. Использование символа циркумфлекса () в квадратных скобках селектора между именем атрибута и знаком равенства означает, что значение атрибута должно начинаться с указанного текста.

E { .... }

 { .... }

a[href^="https://"] {
    color: green; 
}

Значение атрибута оканчивается определённым текстом

Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа применяется знак доллара () в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.

E { .... }

 { .... }

Таким способом можно автоматически разделять стиль для ссылок на сайты домена и для ссылок на сайты других доменов вроде .

a {
    background: url(images/ru.png) no-repeat 0 6px;;
    padding-left: 12px;
}

Стилевые свойства будут применяться только для тех ссылок, атрибут которых оканчивается на «.ru». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Одно из нескольких значений атрибута

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.

E { .... }

 { .... }

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом.

a { .... }

<a href="" class="tag nofollow"> .... </a>

Что такое CSS Selectors

Внешняя таблица стилей — это отдельный файл от вашего HTML-документа. Чтобы связать их, вам нужно будет добавить в заголовок вашего HTML-документа символ, который ссылается на созданный вами файл CSS.

Эта внешняя таблица стилей будет содержать отдельные правила CSS — блоки CSS, которые содержат селектор CSS и набор свойств CSS, называемых блоком объявления.

Селектор CSS определяет, к какому элементу HTML применить свойства.

И селектор CSS, и блок объявлений составляют одно правило CSS. Далее мы рассмотрим некоторые из распространенных способов выбора элементов HTML, чтобы вы могли стилизовать свои веб-страницы.

Псевдоклассы

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:

селекторпсевдокласс { property value; }

Существуют следующие псевдоклассы:

active — Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
link — Непосещенная ссылка.
hover — Ссылка при наведенном курсоре мыши.
focus
visited — Посещенная ссылка.
first-letter — Определяет стиль для первого символа текстового блока.
first-line — Устанавливает стиль для первой строки текстового блока.
after
before

Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 — к любому текстовому блоку.

Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

Листинг: Псевдоклассы гиперссылок

/* Стилевые правила */
a.rollover {
    color #660000;
    text-decoration none;
}                         
a.rolloverhover {
    color #FF0000;
    text-decoration underline;
}                           
 
<!-- Применение в HTML -->
 
<a class="rollover" href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />

Листинг: Unicode символы как иконки

        <style>
            .icon-test:before { content: " "; }
            .icon-test:after { content: " \2652"; }
        <style>
    <head>
    <body>
        <span class="icon-test">Aquarius<span><button>&#x2652; &#9810;<button>

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.

Первый комбинатор символ плюс (+) или соседний селектор. Плюс устанавливается между двумя селекторами:

<селектор 1> + <селектор 2> { <стиль> }

Стиль в этом случае применяется к селектору 2, но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:

strong + i {
color: red; /* Красный цвет текста */
}
…
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.

Результат:

Стиль описанный в примере будет применен только к первому тексту заключенному в тег , т.к. он следует сразу же после тега .

Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:

<селектор 1> ~ <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, который должен следовать за селектором 1. Рассмотри пример:

strong ~ i {
color: red; /* Красный цвет текста */
}
…
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.

Результат:

Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег , несмотря на то, что во втором случае между тегом и стоит тег .

Комбинатор > относится к дочерним селекторам. Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:

<селектор 1> > <селектор 2> { <стиль> }

Стиль будет привязан к селектору 2, который непосредственно вложен в селектор 1.

Пример:

div > strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. Это жирный курсивный текст .
Это обычный текст. А это обычный жирный текст.
</div>

И результат:

Как видно на рисунке, правило стиля подействовало только на первый тег , который непосредственно вложен в тег <div>. А непосредственным родителем второго тега является тег , поэтому правило на него не действует.

Следующим рассмотрим контекстный селектор <пробел>. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:

<селектор 1> <селектор 2> { <стиль> }

Стиль будет применен к селектору 2, если он так или иначе вложен в селектор 1.

Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:

div strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. Это жирный курсивный текст .
Это обычный текст. А это тоже курсивный жирный текст.
</div>
Обычный текст и просто жирный текст

Результат:

Как видим, на этот раз правило подействовало на оба тега , даже на тот, который вложен и в контейнер <div> и в абзац . На тег , который просто вложен в абзац правило css никак не действует.

Селектор id[править]

Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Шрифт Courier
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

#onlyThisOne{
font-familyCourier;
}

      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
</html>

Отобразится как:

Courier

Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Форма
      </title>
      <meta charset="utf-8" />
      <style type="text/css">

input#green{
colorgreen;
}
input#red{
colorred;
}

Basic Selectors

Универсальный селектор или селектор с подстановочными знаками

Универсальный селектор, обозначенный *значком, выбирает все на странице. Обычно этот селектор используется для указания размера поля на странице.

Селекторы тегов

Селекторы тегов выбирают элементы HTML на основе их тега. Пример здесь показывает, что все pтеги будут иметь размер шрифта 14 пикселей.

Селекторы классов

Селекторы классов выбирают элементы HTML на основе имени их класса. Класс выбирается с помощью. символа. Пример здесь показывает, что все элементы с именем класса.noneне будут отображаться.

Селекторы ID

Селекторы ID выбирают элементы HTML на основе их ID. Их выбирают с помощью #. В приведенном здесь примере показано, что элемент #containerбудет иметь поля 0 autoи 0 padding.

5.9 Селекторы ID

Языки документов могут содержать
атрибуты, которые объявлены как имеющие тип ID.
Особенностью атрибутов типа ID является то,
что они могут иметь одно значение;
независимо от языка документа, атрибут ID
может использоваться для уникальной
идентификации элемента. В HTML все атрибуты ID
именуются «id»; приложения XML могут
именовать атрибуты ID по-разному, но с
применением одинаковых ограничений.

Атрибут
ID языка документа позволяет авторам
назначать идентификатор объекту элемента в
дереве документа. В CSS ID-селекторы совпадают
с объектом элемента на базе идентификатора. ID-селектор
CSS содержит «#» непосредственно перед
значением ID.

Следующий
ID-селектор совпадает с элементом H1, чей
атрибут ID имеет значение «chapter1»:

H1#chapter1 { text-align: center }

В следующем пример правило
таблицы стилей устанавливает
совпадение элементом, чьё значение ID — «z98y».
Правило, таким образом, совпадает для
элемента P:

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

В следующем пример, однако, правило стиля
совпадает только с тем элементом H1, который
имеет значение ID — «z98y». Правило в этом
примере не совпадает с элементом P:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID-селекторы имеют более высокий приоритет,
чем селекторы атрибутов. Например, в HTML
селектор #p123 более специфичен,
чем , в терминах каскада.

Примечание. В XML 1.0
информация о том, какой атрибут содержит ID-ы
элемента, находится в ОТД. При разборе XML, ПА
не всегда читают ОТД и поэтому могут не
знать, какой ID у элемента. Если дизайнер
таблицы стилей знает или предполагает, что
это именно данный случай, он должен
использовать нормальные селекторы
атрибутов: вместо .
Однако каскадный порядок нормальных
селекторов атрибутов отличается от ID-селекторов.
Может понадобиться добавить приоритет «!important»
в объявления: . Конечно, элементы в
документах XML 1.без ОТД не имеют ID-ов вообще.

Три вида взаимоотношений в дереве элементов

Предки-потомки;
Родитель-ребенок;
Братья (соседи)

Рассмотри дерево элементов на примере:

<body>
<div>
   <h1>Заголовок<h1>
   <p><strong>Первый<strong> параграф в div<p>
   <p><strong>Второй<strong> параграф в div<p>
   <strong>Просто полужирный текст в div<strong>
<div>
<p><strong>Первый<strong> параграф в body<p>
<body>

Родительский элемент – тег, который содержит в себе рассматриваемый элемент.

В примере отношения родитель-ребенок:

Элемент (2 строка) — родительский по отношению к тегу (3 строка), тогда как — напротив, дочерний элемент (ребенок)
Элемент (4 строка) является родительским по отношению к (4 строка), тогда как — напротив, дочерний элемент (ребенок)
Элемент (2 строка) является родительским по отношению к (6 строка), тогда как — напротив, дочерний элемент (ребенок)
Элемент (8 строка) является родительским по отношению к (8 строка), тогда как — напротив, дочерний элемент (ребенок)
Элемент (1 строка) является родительским по отношению к (2 строка) и (8 строка)

Предок – элемент, который располагается на несколько уровней выше и содержит в себе рассматриваемый элемент.

В примере отношение предок-потомок:

Элемент является предком для элементов (3 строка), и (4 строка), и (5 строка), (6 строка) и (8 строка); в то время как все, перечисленные элементы являются потомками
Элемент (2 строка) является предком для элементов (4 и 5 строка); в то время как является потомком для

Братский элемент (соседний) – элемент, который имеет общий родительский элемент с рассматриваемым.

В примере отношение соседи (братья):

Элементы (3 строка), (4 строка), (5 строка) и (6 строка) являются братьями или соседними элементами.
Элементы (2 строка) и (8 строка) являются братьями или соседними элементами.

Псевдоклассы

Общий синтаксис

У ссылок есть несколько собственных псевдоклассов. Желательно соблюдать приведённый порядок.

Псевдокласс :link служит для выделения всех ссылок, на которые еще не кликнули. Псевдокласс :visited выбирает уже посещённые ссылки.

Выбранная ссылка управляется через :active. При наведении на ссылку мышкой применяются стили псевдокласса :hover.

Псевдокласс можно комбинировать с классом.

Псевдокласс :hover применим не только к ссылкам, но и к другим элементам.

При наведении мыши на блок, он поменяет свой цвет.

Если подключить стили видимости, то можно добиться эффекта появления и исчезновения элемента при наведении мыши.

Псевдокласс :frist-child выбирает первый дочерний элемент. Поменяем цвет в первом параграфе.

Меняем цвет у первого i в каждом параграфе.

Меняем все i только в певром параграфе. Второй параграф не задействован.

Псевдокласс :lang позволяет задать специальные правила для различных языков.

Зададим стиль для кавычек.

В противоположность :first-child псевдокласс :last-child выбирает последний дочерний элемент.

Псевдокласс :checked выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны.

Псевдокласс отрицания :not(selector) бывает очень полезным. Нужно выбрать все div, за исключением того, который имеет id = container.

Можно выбрать все элементы, за исключением p.

5.2 Синтаксис селекторов

Простой селектор — это либо
, либо , непосредственно за которым в произвольном порядке может следовать несколько , или . Простой селектор сопоставим, если сопоставимы все его компоненты.

Селектор представляет собой
последовательность из одного или нескольких простых селекторов, между которыми
расположены комбинаторы. Комбинаторами могут служить пробелы, символы
«>» и «+». Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.

Элементы дерева документа, которые сопоставляются селектору, называются его
областями применения. Селектор, состоящий из одного простого селектора, сопоставляется любому элементу, удовлетворяющему требованиям данного селектора. Если к последовательности
дополнительно приписать селектор и комбинатор, то это наложит дополнительные требования соответствия. Поэтому областью применения селектора всегда следует
считать подмножество элементов, сопоставляемых крайнему справа простому
селектору.

К последнему в последовательности простому селектору может быть добавлен один . В этом случае информация о стиле будет применяться только к части каждой области применения.

5.2.1 Группировка

Если в нескольких селекторах используются одни и те же объявления, их
можно сгруппировать в список, разделив запятыми.

В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

эквивалентна следующей:

H1, H2, H3 { font-family: sans-serif }

Наряду с такой возможностью в CSS предлагаются другие алгоритмы сокращения, включая и .

Соседние селекторы

Для создания соседнего селектора в CSS используется плюс:

Он сработает только в том случае, когда второй элемент на странице идёт сразу после первого. В примере из начала статьи стоит такая задача: выделить красным цветом все первые абзацы разделов — те, которые идут сразу после заголовков второго уровня. Чтобы автоматически найти все такие абзацы, используем соседний селектор:

Если после подзаголовка идёт, например, картинка, а только потом абзац — стиль не сработает, потому что элементы должны быть соседями, отсюда и название. Сделаем страницу с соседними селекторами и покрасим первые абзацы в красный. За основу возьмём статью про спринты в программировании:

Псевдоклассы

Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:

first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.
nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:
hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.
:link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
:focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.

Селектор ID

Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля. Для назначения стиля элементу с заданным ID используется следующий синтаксис:

#идентификатор { правила форматирования }

После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов, то есть, должна соблюдаться уникальность идентификатора.

Пример. Применение селектора ID

/* селектор в CSS */
#copyright {
    txt-align center;
    font-size 10pt;
    font-weight bold;
    color #996633;
    border-top 1px dashed black;
}          
 
<!-- Применение на странице -->
 
<p id="copyright">
    &copy; 2012.
</p>

Псевдоклассы

Последнее обновление: 21.04.2016

В дополнение к селекторам тегов, классов и идентификаторов нам доступны селекторы псевдоклассов, которые несут дополнительные
возможности по выбору нужных элементов.

Список доступных псевдоклассов:

:root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице
корневым элементом практически всегда является элемент
:link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
:visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
:active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход
:hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться
и к другим элементам, например, к параграфам
:focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши
на поле ввода (например, текстовое поле)
:not: позволяет исключить элементы из списка элементов, к которым применяется стиль
:lang: стилизует элементы на основании значения атрибута
:empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Псевдоклассы в CSS3</title>
        <style>
            a:link    {color:blue; text-decoration:none}
            a:visited {color:pink; text-decoration:none}
            a:hover   {color:red; text-decoration:underline}
            a:active  {color:yellow; text-decoration:underline}
			input:hover {border:2px solid red;}
        </style>
    </head>
    <body>
        <a href="index.html">Учебник по CSS3</a>
		<input type="text" />
    </body>
</html>

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:not(.blueLink) { color: red; }
        </style>
    </head>
    <body>
		<a>Первая ссылка</a><br/>
		<a class="blueLink">Вторая ссылка</a><br/>
		<a>Третья ссылка</a>
    </body>
</html>

Селектор применяет стиль ко всем ссылкам за исключением тех, которые имеют класс «blueLink». В скобки псевдоклассу
not передается селектор элементов, которые надо исключить.

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :lang(ru) {
				color: red;
			}
        </style>
    </head>
    <body>
		<form>
			<p lang="ru-RU">Я изучаю CSS3</p>
			<p lang="en-US">I study CSS3</p>
            <p lang="de-DE">Ich lerne CSS3</p>
        </form>
    </body>
</html>

НазадВперед

Селектор class

Виды селекторов[править]

Часть 2. Селекторы атрибутов

Селектор наличия атрибута

Атрибут со значением

Значение атрибута содержит указанный текст

Значение атрибута начинается с определённого текста

Значение атрибута оканчивается определённым текстом

Одно из нескольких значений атрибута

Что такое CSS Selectors

Псевдоклассы

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

Селектор id[править]

Basic Selectors

Универсальный селектор или селектор с подстановочными знаками

Селекторы тегов

Селекторы классов

Селекторы ID

5.9 Селекторы ID

Три вида взаимоотношений в дереве элементов

Псевдоклассы

5.2 Синтаксис селекторов

5.2.1 Группировка

Соседние селекторы

Псевдоклассы

Селектор ID

Псевдоклассы

Селектор :not

Псевдокласс :lang

Похожие записи:

Похожие записи: