Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Селектор

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

Шаблон селектора соответствует селектору, если все компоненты селектора соответствуют искомому элементу.

То есть следующий шаблон селектора соответствует не всем элементам H1, а только тем, которые имеют класс «class»:

  1.H1.class
  2.
Селекторы, состоящие из ряда селекторов, могут быть разделены с помощью специальных разделителей. Разделителями могут быть: знак пробела, знаки «>», «+». Пробел может встречаться между селекторами и вокруг простого селектора.

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

Группировка селекторов

Когда несколько селекторов используют одно и то же объявление, они могут быть сгруппированы в один список, разделенный через запятую. Пример: В данном примере мы сжимаем три правила в одно. Данные три правила:

  1.H1 { font-family: sans-serif }
  2.H2 { font-family: sans-serif }
  3.H3 { font-family: sans-serif }
  4.
эквивалентны:
  1.H1, H2, H3 { font-family: sans-serif }
  2.

Универсальный селектор

Универсальный селектор записывается как символ звёздочки «*», который соответствует элементу любого типа. Универсальный селектор соответствует любому одиночному элементу в структуре документа. Если универсальный селектор не используется в контексте другого селектора, то его можно не указывать:

  1.*[LANG=fr] и [LANG=fr] /* равнозначны */
  2.*.warning и .warning /* равнозначны */
  3.*#myid и #myid /* равнозначны */
  4.
а вот контекстный универсальный селектор иногда может приносить пользу:
  1.DIV * {color:red;}
  2.
так как в контексте элемента div будут найдены все элементы и CSS изменит их цвет на красный.

Универсальный селектор поддерживается множеством браузеров, в том числе и Internet Explorer, начиная с 6 версии.

Типы селекторов

Тип селектора соответствует названию элемента. Пример: Следующий селектор соответствует всем элементам H1.

  1.H1 { font-family: sans-serif }
  2.

Потомки селекторов

В некоторых случаях разработчикам необходимо получить доступ к элементу потомку другого элемента (например, получить доступ к элементу em находящемуся в элементе H1, этот пример будет подробно рассматриваться в данном разделе). Для того чтобы Вы могли лучше уяснить смысл, рассмотрим пример:

  1.H1 { color: red }
  2.EM { color: blue }
  3.
Несмотря на намерение этого правила добавить выразительности элементу em, путём изменения цвета элемента, эффект будет утерян в следующем случае:
  1.<H1>This headline is <EM>very</EM> important</H1>
  2.
Изменим данное правило, следующим образом:
  1.H1 { color: red }
  2.EM { color: red }
  3.H1 EM { color: blue }
  4.
теперь третье CSS правило найдет элемент em:
  1.<H1>This <SPAN class="myclass">headline
  2.is <EM>very</EM> important</SPAN></H1>
  3.

Пример, следующий селектор найдет все элементы P, которые являются последними элементами потомками для элемента DIV:

  1.DIV * P /* (не забывайте про пробел, окружающий универсальный селектор)*/
  2.

Дочерний селектор

Дочерний селектор соответствует элементу, являющемуся дочерним элементом для другого элемента. Дочерний селектор создаётся с помощью разделителя «>».

Следующее правило устанавливает свойство всех элементов P, являющихся дочерними элементами для элемента BODY.

  1.BODY > P { line-height: 1.3 }
  2.
Следующий пример комбинирует правила использования селекторов потомков и дочерних селекторов:
  1.DIV OL>LI P
  2.

Данное правило расшифровывается следующим образом: найти все элементы потомки P для элементов LI, причем элемент LI является дочерним элементом OL, который в свою очередь является элементом потомком для элемента DIV.

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

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

Селекторы, соотносящиеся друг с другом как «брат и сестра».

Селекторы, соотносящиеся как «брат и сестра», имеют следующий синтаксис E1 + E2, где E2 зависит от первого элемента. Элементы будет найдены в том случае, если E1 и E2 соотносятся как элементы одно элемента предка и элемент E1 немедленно предшествует элементу E2.

Смежные элементы создают объект, представление которого форматируется автоматически (например, вертикальная граница между элементами). Разделительный селектор «+» позволяет добавить дополнительный стиль к смежным элементам.

Поэтому следующее правило применяется к элементу P, когда элемент P немедленно следует за элементом MATH, для установления отступа равному 0.

  1.MATH + P { text-indent: 0 }
  2.
Следующее правило уменьшает вертикальное расстояние между двумя элементами (H1 и H2, последний из которых немедленно следует за первым).

Смежные элементы создают объект, представление которого форматируется автоматически (например, вертикальная граница между элементами). Разделительный селектор «+» позволяет добавить дополнительный стиль к смежным элементам.

  1.H1 + H2 { margin-top: -5mm }
  2.

Следующий пример полностью аналогичен предыдущему примеру, за исключением того, что элемент H1 имеет дополнительны класс, то есть выражение соответствует элемент H1, имеющий атрибут «class» равный «opener»(class="opener").

  1.H1.opener + H2 { margin-top: -5mm }
  2.

Атрибуты селекторов. Шаблоны атрибутов селекторов

CSS2 позволяет разработчикам указывать селекторы, которые соответствуют атрибутам элементам в теле документа. Данный механизм увеличивает скорость поиска элементов, соответствующих заданному шаблону.

Для установки селекторов атрибутов в CSS2 применяются следующие четыре способа:

  1. [att] - Соответствует элементу, имеющему атрибут "att" с любым значением.
  2. [att=val] – Соответствует элементу, имеющему атрибут "att" со значением равным " val ".
  3. [att=~val] – Соответствует элементу, имеющему атрибут "att" состоящего из списка значений, разделенных пробелом, при условии, что одно из значений этого атрибута равно "val ". При использовании данного селектора слова в значении атрибута не должны содержать пробелы;
  4. [att=|val] – Соответствует элементу, имеющему атрибут "att" состоящего из списка значений, разделенных дефисом, и при условии, что одно из значений этого атрибута начинается с символов "val ". При использовании данного селектора слова в значении атрибута не должны содержать пробел;
Значение атрибута должно быть идентификатором или строкой. Регистро-зависимость названий атрибутов и их значений зависит от языка документа.

К примеру, следующее правило найдёт элемент H1, имеющий атрибут title, с любым значением:

  1.H1[title] { color: blue; }
  2.
В следующем примере, правило соответствует всем элементам span, имеющих атрибут " class " равный " example".
  1.SPAN[class=example] { color: blue; }
  2.

CSS2 допускает использовать многочисленные атрибуты селекторы, с целью расширенного поиска элементов в структуре документа. Например, следующее правило найдет элементы SPAN, у которых атрибут " hello " равен "Cleveland", а атрибут "goodbye" равен "Columbus".

  1.SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
  2.

Следующий пример демонстрирует разницу между селекторами "~=" и "=", в первом случае будет найдены элементы A, имеющие атрибут rel, значение которого равно "copyright copyleft copyeditor", во втором случае будет найден элемент значение атрибута href, которого равно "http://www.w3.org/".

  1.A[rel~="copyright"]
  2.A[href="http://www.w3.org/"]
  3.

Следующее правило скроет любой элемент, атрибут LANG которого равен значению "fr".

  1.*[LANG=fr] { display : none }
  2.

Следующие два правила устанавливают стиль звучания:

  1.DIALOGUE[character=romeo]
  2.{ voice-family: "Lawrence Olivier", charles, male }
  3.
  4.DIALOGUE[character=juliet]
  5.{ voice-family: "Vivien Leigh", victoria, female }
  6.

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

В HTML пользователи могут использовать нотацию точки, как альтернативу для "~=" для того чтобы отыскать элемент по его классу. Например, "DIV.value" and "DIV[class~=value]" имеют одинаковое значение в HTML. Имя класса должно следовать немедленно за точкой.

Например, мы можем определять стиль всех элементов, которые мы можем найти с использованием селектора class~="pastoral" следующим образом:

  1..pastoral { color: green } /* выбрать все элементы с селектором class~=pastoral*/
  2.

или без использования универсального селектора:

  1. *.pastoral { color: green } /* выбрать все элементы с селектором class~=pastoral*/
  2.

Следующее правило стиля будет применено только к элементам H1 с селектором равным class~="pastoral":

  1.H1.pastoral { color: green } /* элементы H1 с селектором class~=pastoral */
  2.
Установив данное правило, первый элемент H1, в примере указанном ниже, не будет изменен, в то время, второй изменится соответствующим образом.
  1.<H1>Not green</H1>
  2.<H1 class="pastoral">Very green</H1>
  3.

Для поиска подмножества значений класса в селекторе должны быть указаны соответствующие значения, котором обязательно предшествует точка, при этом порядок их расположения не имеет значения. Пример. В данном примере правило соответствует всем элементам P, у которых атрибут class назначен с помощью разделенного пробелом списка значений, включающих значения " pastoral " и "marine".

  1.P.pastoral.marine { color: green }
  2.

Данное правило соответствует в том случае, когда атрибут class="pastoral blue aqua marine", но не class="pastoral blue".

Селектор ID

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

Идентификатор элемента, используемый как экземпляр класса внутри структуры документа. CSS id селектор соответствует экземпляру класса элемента, основанному на его идентификаторе. ID указывается с помощью символа решетки "#" и немедленно следующего значения идентификатора. Примеры:

Следующий id селектор находит элемент H1, атрибут "id" которого равен "chapter1":

  1.H1#chapter1 { text-align: center }
  2.

В следующем примере, стилевое правило соответствует элементу, который имеет ID равный "z98y". Таким образом, правило найдёт элемент P.

  1.<HEAD>
  2.<TITLE>Match P</TITLE>
  3.<STYLE type="text/css">
  4.*#z98y { letter-spacing: 0.3em }
  5.</STYLE>
  6.</HEAD>
  7.<BODY>
  8.<P id=z98y>Wide text</P>
  9.</BODY>
10.
11.

В следующем примере правило соответствует элементу H1, а не элементу P.

  1.<TITLE>Match H1 only</TITLE>
  2.<STYLE type="text/css">
  3.H1#z98y { letter-spacing: 0.5em }
  4.</STYLE>
  5.</HEAD>
  6.<BODY>
  7.<P id=z98y>Wide text</P>
  8.</BODY>

Селектор ID имеет более высокий приоритет, чем селектор атрибут. Более подробно об этом написано в разделе «Каскадирование в CSS2». Примечание. В XML 1.0 информация об атрибутах ID элементов, содержится в DTD. Когда происходит разбор документа, в некоторых случаях DTD не применятся, таким образом, может быть неизвестен идентификатор элемента. Если Вы уверены об этом, то должны использовать обычный атрибут селектор взамен использования селектора идентификатора, то есть взамен #p317 используйте [name=p317]. Однако обычный порядок расположения атрибутов селекторов отличается от порядка ID селекторов. Поэтому, для избегания ошибок необходимо использовать оператор приоритета "!important".


Александр Ермаков. Хостинг - www.pwstudio.org