Html селекторы


Что такое селекторы

Повторим немного то, что уже раскрывалось в теме «Синтаксис CSS». Итак, селектор — это элемент, к которому применяется объявление в правиле стиля.

Термины, используемые в описании правил CSS.

Правило CSS
Рис.1. Обычное правило CSS.

Пример правила CSS:

Пример правила CSS
Рис.2. Пример правила CSS.

Коротко про синтаксис записи правил CSS:

  • Объявление стиля в парвиле берётся в фигурные скобки — {}
  • Свойство и значение в объявлении разделяются двоеточием — :
  • В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
  • В конце каждой пары свойство: значение ставится точка с запятой — ;
  • После последней пары свойство: значение точку с запятой ставить не обязательно.
  • Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
  • Синтаксис CSS не чувствителен к регистру символов.

В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.

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

Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.

<html> <head> 	<title>Синтаксис CSS</title> <style> 	h1 { color: blue; font-size: 16pt; text-align: center; } </style> </head> <body> 	<h1>Привет!</h1> 	<h2>Заголовок h2!</h2> </body> </html>

Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков <h1>, <h2> и <h3> были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:

<html> <head> 	<title>Группирование в CSS</title> <style> 	h1, h2, h3 { color: blue; text-align: center; } </style> </head> <body> 	<h1>Привет h1!</h1> 	<h2>Заголовок h2!</h2> </body> </html>  

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

<style> 	h1 { color: blue; text-align: center; } 	h2 { color: blue; text-align: center; } 	h3 { 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>  <h1>Привет!</h1>  <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.

Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией «семейные» термины.

Теперь рассмотрим все типы связей.

Предки и потомки

Предки (ancestor) — элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов.

Потомки (descendant) — элементы, вложенные в другой элемент.

Селекторы потомков уже были рассмотрены выше.

Родители и дочерние элементы

Родитель (parent) — это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child — ребёнок) — это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.

В нашем дереве элементов у тега <body> следующие дочерние элементы: <h1>, <p>, <ul> и ещё один <p>.

Братские или сестринские элементы

Братские или сестринские элементы, (англ. siblings — братья и сестры), группа элементов имеющая общего родителя. Например, теги <h1>, <p>, <ul> и второй <p> — сестринские, так как у них общий родитель <body>.


Смежные элементы

Смежные элементы — это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары: <h1> и <p>, <p> и <ul>, <ul> и <p>.

Теперь вернёмся к селекторам.

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

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

HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере <div> уже не красного цвета, так как для этого абзаца тег <div> родитель, а тег <td> предок.

Читайте подробнее: дочерние селекторы.

Смежный (соседний) селектор


Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак «+» и за ним селектор выбираемого элемента.

Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами <h2>, желательно увеличить верхний отступ (свойство margin-top). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег <h2> идёт сразу после <h1>, а это может быть в начале статьи, вержний отступ над тегом <h2> будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.

Вот html-код с примером работы селектора смежного элемента.

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

Родственный селекторы

Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак «~» (тильда) и за ним селектор выбираемых элементов.

Пример исользования сестринского селектора.

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

Читайте подробнее: родственные селекторы.

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

Если в селекторе правила CSS указан символ «*», то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет «обнулить» все внешние и внутренние отступы. Тогда нужно использовать такой стиль:

Но символ «*» можно использовать в составных селекторах.

Этот код назначает красный цвет тексту всех потомков элемента <ul>.

Классы

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

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

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

Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов <ul>, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top, ul.menu и ul.menu-bottom.

В теле html-документа различные меню создаются с указанием класса в атрибуте class:

<ul class=»menu-top»> … </ul>
<ul class=»menu»> … </ul>
<ul class=»menu-bottom»> … </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: значение; … }

komotoz.ru

Селектор тега

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

Давайте покрасим все абзацы в красный цвет:

Соответственно всем остальным тегам соответствуют свои селекторы: тегу <div> соответствует CSS селектор div, тегу <h1> соответствует CSS селектор h1, тегу <h2> соответствует CSS селектор h2 и так далее.

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

Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h2, h3 и абзацы в красный цвет. В этом случае их селекторы можно объединить через запятую:

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

Контекстный селектор (вложенность тегов друг в друга)

Контекстного селектор позволяет обращаться к тегам по их вложенности в другие теги.

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

Для примера представим ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h2.

Например, так — p i — мы обратимся ко всем тегам i, находящимся внутри p, p b — так ко всем тегам b внутри p, а так — div p b — ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.

В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h2) красными не станут:

Дочерний селектор > (непосредственная вложенность)

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

Что это значит — разберем на следующем примере: обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат непосредственно внутри абзаца, не затронув <i>, лежащие сначала внутри <b>, а потом уже внутри абзаца:

Пробелы вокруг знака > не обязательны, но их обычно ставят для красоты.

Соседний селектор +

Соседний селектор + позволяет выбрать элемент по его соседу сверху. К примеру, так: p + h2 — я выберу все h2, которые следуют непосредственно сразу за абзацем p (наличие обычного текста не влияет на соседство, а наличие тегов — влияет).

Давайте обратимся к тегу <i> (покрасим в красный цвет), который лежит непосредственно после тега <b>, не затронув остальные <i>:

Пробелы вокруг знака + не обязательны, но их обычно ставят для красоты.

Родственный селектор ~

Родственный селектор ~ работает подобно соседнему селектору +, но выбирает не непосредственного соседа, а всех соседей снизу.

Давайте обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат после тега <b>, не затронув <i>, находящиеся перед тегом <b>:

Обратите внимание на то, что наличие посторонних тегов (в нашем случае span) не влияет на выбор. Кроме того, обратите внимание на то, что выбор распространяется до конца родителя (в нашем случае абзаца). Теги <i>, находящиеся вне родителя захватываться не будут (только если перед ними нету своего <b>).

Пробелы вокруг знака ~ не обязательны, но их обычно ставят для красоты.

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

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

Злоупотреблять этим селектором не рекомендуется, так как он замедляет работу браузера.

Можно использовать * не в чистом виде, а в комбинации с другими селекторами. К примеру, так мы выберем любые теги, лежащие непосредственно внутри абзацев:

А так выберем все теги i, лежащие внутри любого тега, который в свою очередь лежит внутри абзаца:

Селектор по id

Селектор по id позволяет обращаться к элементам по их уникальному названию, указанному в атрибуте id, (другого id с таким именем на странице быть не должно — будет конфликт).

Если мы дадим элементу, к примеру, id test (то есть сделаем следующий атрибут — id=»test»), тогда в CSS мы сможем обратиться к нему таким образом: #test — то есть сначала пишется символ «решетка», а затем то имя, которое мы записали в атрибут id.

Селектор по id имеет приоритет по отношению с селекторам тегов и классам.

Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id=»test» — зеленый:

А теперь атрибут id дадим конкретному диву <div> и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:

А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h2 в данном случае) из #test стали красного цвета:

Селектор по классу

Классы элементам задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице, в отличие от id. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.

Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом — .test — вначале символ «точка» и потом имя класса из атрибута class.

В примере ниже и абзацы, и заголовки имеют один и тот же класс .test, который красит эти элементы в красный цвет:

Определенный тег с заданным классом

Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h2 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h2 с этим же классом.

В этом случае вместо селектора .test я должен написать следующее: p.test — таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h2.test — то выберу все заголовки h2 с классом test, не затронув абзацев.

В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом — не станут:

Итак, еще раз: p.test — такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.

Давайте теперь выберем только h2 с классом test:

А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h2 с классом test красились в красный цвет, а абзацы с этим классом — в зеленый:

Мультиклассы

Элементу можно задать не один класс, а сразу несколько через пробел.

Пусть, к примеру, у нас есть абзац с двумя классами — .www и .ggg, в этом случае мы можем обращаться к этому элементу, как по одному классу, так и по другому. Например, первый класс задает жирный текст, а второй — красный цвет:

Однако, мы можем выбрать также только те элементы, у которых есть одновременно и один класс, и второй, вот таким образом — .www.ggg — так как пробел отсутствует между селекторами классов, это обозначает одновременность, а не вложенность, как было бы вот так — .www .ggg (между классами стоит пробел).

В следующем примере те элементы, у которых есть одновременно и класс .www, и класс .ggg получают размер шрифта в 30px:

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

Давайте посмотрим на примерах.

Выберем только абзацы, у которых есть одновременно класс .www и класс .ggg:

Выберем только заголовки h2, у которых есть одновременно класс .www и класс .ggg:

Выберем элемент с id=»test» и классом .www :

Селекторы атрибутов

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

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

Выбор по наличию атрибута

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

Давайте выберем все элементы, у которых есть атрибут type:

Давайте выберем все инпуты, у которых есть атрибут type:

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

Выбор по значению атрибута

Выбор по содержимому атрибута делается с помощью равно =:

Давайте выберем все инпуты, у которых атрибут type имеет значение text:

Выбор по начальному тексту атрибута

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

Давайте выберем все ссылки, у которых атрибут href начинается с http://:

Выбор по конечному тексту атрибута

Можно выбрать элемент по тексту, на которое должно заканчиваться значение атрибута:

Давайте выберем все ссылки, у которых атрибут href заканчивается на .html:

Выбор по определенному тексту в атрибуте

Можно выбрать элемент по тексту, который должен содержаться в значении атрибута:

Давайте выберем все ссылки, у которых в атрибуте href есть текст /webroot/:

Выбор по одному из значений атрибута

Бывают атрибуты, в которых есть несколько значений через пробел (например, атрибут class). Можно выбрать элементы, у которых в атрибуте присутствует указанное значение:

Давайте выберем все абзацы, у которых в атрибуте class есть слово test:

Выбор по дефису

Бывает такое, что в названии атрибута присутствует какая-то приставка, заканчивающаяся дефисом, к примеру, у элемента может быть класс menu-text. Здесь menu- это и есть такая приставка.

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

Давайте выберем все абзацы, у которых в атрибуте class есть класс, который начинается с menu-:

code.mu

1.*

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.

Звездочку * также можно использовать для дочерних селекторов.

Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.

Просмотреть DEMO.

Совместимость

2. #X

Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

Просмотреть DEMO.

Совместимость

3. .X

Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.

Просмотреть DEMO.

Совместимость

4. X Y

Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

Просмотреть DEMO.

Совместимость

5. X

Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul {}.

Просмотреть DEMO.

Совместимость

6. X:visited and X:link

Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.

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

Просмотреть DEMO.

Совместимость

7. X + Y

Эта запись указывает на смежный селектор. Будет отбираться только тот элемент, которому непосредственно предшествует шаблонный элемент. В данном случае первый абзац после каждого элемента ul будет иметь текст красного цвета.

Просмотреть DEMO.

Совместимость

8. X>Y

Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.

Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.

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

Просмотреть DEMO.

Совместимость

9. X ~ Y

Этот комбинатор находит одноуровневые узлы и идентичен X + Y, однако он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, которому непосредственно предшествует шаблонный элемент, этот селектор более общий. В вышеприведенном примере, он будет выбирать любые элементы p до тех пор, пока они следуют за ul.

Просмотреть DEMO.

Совместимость

10. X[title]

Относимый к селекторам атрибутов, в вышеприведенном примере он выберет только тэги-привязки, имеющие атрибут title. Тэги-привязки, не имеющие его, не получат этого конкретного стиля. А что, если вам нужен более специальный случай ? Что ж…

Просмотреть DEMO.

Совместимость

11. X[href=»foo»]

Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.

Обратите внимание, что мы заключаем значение в кавычки. Помните, что это также нужно делать при использовании движка селекторов JavaScript CSS. Предпочтительно перед неофициальными методами, всегда пользуйтесь селекторами CSS3, когда возможно.

Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.

Просмотреть DEMO.

Совместимость

12. X[href*=»nettuts»]

Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.

Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.

Просмотреть DEMO.

Совместимость

13. X[href^=»http»]

Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.

Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.

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

Просмотреть DEMO.

Совместимость

14. X[href$=».jpg»]

И снова мы пользуемся знаком регулярных выражений, $, для обращения к концу строки. В этом случае мы ведем поиск всех привязок, ссылающихся на изображение — или, по крайней мере, url’а, оканчивающегося на .jpg. Помните, что это, скорее всего, не сработает с gif’ами и png.

Просмотреть DEMO.

Совместимость

15. X[data-*=»foo»]

Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:

Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?

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

Просмотреть DEMO.

Совместимость

16. X[foo~=»bar»]

А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (~) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.

Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.

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

Просмотреть DEMO.

Совместимость

17. X:checked

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

Просмотреть DEMO.

Совместимость

18. X:after

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

Многие познакомились с этими классами при первой встрече с хаком clear-fix.

Этот хак использует псевдоэлемент :after для присоединения пробела после элемента, а затем его очистки. Этот великолепный прием стоит иметь в своем инструментарии, особенно в тех случаях, когда невозможно использовать метод overflow: hidden;.

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

Совместимость

19. X:hover

Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!

Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.

Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.

Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.

Совместимость

20. X:not(selector)

Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.

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

Просмотреть DEMO.

Совместимость

21. X::pseudoElement

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

Псевдоэлемент состоит из двух двоеточий: ::

Выберите первую букву абзаца

Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.

Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.

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

«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник

Просмотреть DEMO.

Совместимость

22. X:nth-child(n)

Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!

Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).

Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.

Просмотреть DEMO.

Совместимость

23. X:nth-last-child(n)

Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.

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

Просмотреть DEMO.

Совместимость

24. X:nth-of-type(n)

Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.

Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.

Просмотреть DEMO.

Совместимость

25. X:nth-last-of-type(n)

Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.

Совместимость

26. X:first-child

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

Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.

Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.

Просмотреть DEMO.

Совместимость

27. X:last-child

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

Пример

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

Разметка

Здесь нет ничего особенного; всего лишь простой список.

CSS

Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.

css селекторы

Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.

Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.

css селекторы

Вот так; все исправлено!

Просмотреть DEMO.

Совместимость

Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!

28. X:only-child

Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.

Он позволяет выбирать элементы, являющиеся единственным дочерним у родителя. Например, касаемо фрагмента вверху, красным цветом будет окрашен только абзац, который является единственным дочерним элементом div’а.

Давайте представим следующую разметку.

В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.

Просмотреть DEMO.

Совместимость

29. X:only-of-type

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

Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.

Просмотреть DEMO.

Совместимость

30. X:first-of-type

Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.

Проверка

Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:

Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

Решение 1

Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».

Решение 2

Второй возможный вариант будет использовать смежный селектор.

В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.

Решение 3

Можно вредить им или играть с этими селекторами, как угодно.

На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!

Просмотреть DEMO.

Совместимость

webformyself.com

С помощью селекторов CSS Вы можете выбирать желаемые элементы на странице для оформления.

Твитнуть

С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.

В CSS существуют следующие виды селекторов:

Вы можете выбирать элементы на странице для оформления по названию тэга.

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

Идентификатор для элемента задается с помощью атрибута id (<p id=»идентификатор»>текст</p>).

Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ «#» (#идентификатор {color:red}).

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

С помощью атрибута class можно задать, что элемент относится к группе (<p class=»имя_группы»>текст</p>).

Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ «.» (.имя_группы {color:red}).

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

Элементы на странице могут быть выбраны по их атрибутам.

Пример ниже оформит все элементы, которые ссылаются на главную страницу нашего сайта:

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

Например, Вы можете комбинировать селекторы тэгов с селекторами class:

Также Вы можете комбинировать селекторы тэгов:

Символ «+» позволяет выбирать элементы, которые идут сразу после указанного.

Часто при оформлении HTML документов с помощью CSS приходится применять одинаковые свойства для разных селекторов, например:

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

www.wisdomweb.ru

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8"> </head>  <body>   <input type="checkbox">  <input type="checkbox" checked>  <input type="text" id="message">   <h3 id="widget-title">Сообщения:</h3>  <ul id="messages">  <li id="message-1">Сообщение 1</li>  <li id="message-2">Сообщение 2</li>  <li id="message-3" data-action="delete">Сообщение 3</li>  <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>  <li id="message-5" data-action="edit delete">Сообщение 5</li>  <li><a href="#">...</a></li>  </ul>    <a href="http://site.com/list.zip">Ссылка на архив</a>  <a href="http://site.com/list.pdf">..И на PDF</a>    <script>  // тестовая функция для селекторов  // проверяет, чтобы элементов по селектору selector было ровно count  function test(selector, count) {  var elems = document.querySelectorAll(selector);  var ok = (elems.length == count);   if (!ok) alert(selector + ": " + elems.length + " != " + count);  }   // ------------- селекторы --------------   // Выбрать input типа checkbox  test('input[type="checkbox"]', 2);   // Выбрать input типа checkbox, НЕ отмеченный  test('input[type="checkbox"]:not(:checked)', 1);   // Найти все элементы с id=message или message-*  test('[id|="message"]', 6);   // Найти все элементы с id=message-*  test('[id^="message-"]', 5);   // Найти все ссылки с расширением href="...zip"  test('a[href$=".zip"]', 1);   // Найти все элементы с data-action, содержащим delete в списке (через пробел)  test('[data-action~="delete"]', 2);   // Найти все элементы, у которых ЕСТЬ атрибут data-action,  // но он НЕ содержащит delete в списке (через пробел)  test('[data-action]:not([data-action~="delete"])', 1);   // Выбрать все чётные элементы списка #messages  test('#messages li:nth-child(2n)', 3);   // Выбрать один элемент сразу за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title + *', 1);   // Выбрать все ссылки, следующие за заголовком h3#widget-title  // на том же уровне вложенности  test('h3#widget-title ~ a', 2);   // Выбрать ссылку внутри последнего элемента списка #messages  test('#messages li:last-child a', 1);  </script> </body>  </html>

learn.javascript.ru

Во-воторых: #main это ID элемента div и этот элемент всегда :not(p) — это не p — это div и поэтому это условие будет срабатывать всегда. Т.е. запись #main:not(p) означает — все элементы, кроме p с id=main.

Сначала прочитал как
<p id="main"> </p>
Но как понимаю вы имели ввиду, все элементы кроме p и у этих элементов должен быть id="main» Что кстати да в примере ниже, сначала не понял какой верный вариант даже.

Например: #main:not(p) — это 2 селектора, которым должен соответствовать один элемент: у элемента должен быть id=main и тег не P.

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

*:not(p)

Означает что элемент должен быть не <p> и любой. Но поскольку color наследуемый параметр, создается впечатление что пример выше не рабочий, если только не указать выше явно color для *
Если бы там был border (не наследуемый) все было бы лучше для меня search
Однако, если использовать составной(upd. контекстный) селектор, скажем так
* body *:not(p) {color: red}
то не имеет значения наследуемый параметр или нет, потому что мы обращаемся ко всем элементам на одном уровне(блин, уровень наверное не корректно говорить(понять бы границы этого уровня, как то не смог нагуглить вчера), я имею ввиду, что все элементы сестринские, а значит и наследования нет), и ищем элемент там smile
Вооот, а дальше объясните мне разницу, пожалуйста, между:

ul li:not(.last) /* для примера, понимаю что только к элементам <li> */ ul *:not(.last) ul :not(.last)

В том плане, насколько третья запись не корректная? -) Ну нравится она мне, я как бы хочу получить доступ просто к дочерним элементам, а не ко всем или к конкретным

input[type=»checkbox»]:not(:checked) — сами скажите что это значит smile

Судя по всему это значит «выбрать все флажки, которые не чекнуты»
Хотя вроде бы есть unchecked или я путаю с джес? Весь вопрос не в том, как работает селектор, а в том, в каком диапазоне он работает. В том плане, что подразумевается перед input в CSS? Я так понимаю он выбирает все input в документе независимо от их вложенности 😕
Еще вопрос, а можно ли сделать дефалтно наследуемый параметр типа color-a не наследуемым? inherit наоборот -) Прошу прощения если много букв.

P.S. очень хочу title к кнопке «редактировать», долго вчера не решался нажать на карандаш smile А и ссылки у вас четко выделяются good это scale?
upd. чутка освежил в памяти теорию, таки составные селекторы это как раз ваш пример с чекбоксом, а то, что я выше называл составными, это контекстные селекторы (пробел + ~ >)

wp-kama.ru

Селекторы в CSS

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

P{ 	Стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой. Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры :
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

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

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

<p id = “first”>Абзац</p>

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ 	Font-size: 22px }

Мы обратились к абзацу с id = first. Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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

О псевдоклассах я написал отдельную статью, поэтому не вижу смысла повторяться.

Объединение селекторов

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

Вложенные селекторы

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
Table td – выберет все ячейки, лежащие в таблицах
Ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов , лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
<strong>#header .logo span:first-letter{}</strong> – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

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

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними, то нужно прописать это так:
Ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
P > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

<p><blockquote><a href = “#”></a></blockquote></p>

Если прописать такой селектор P > a, то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

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

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {}, то этот селектор выберет элемент с атрибутом class = "class4", и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

<p class = “class1”></p> <img> <p class = “class4”></p>

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img. Вот если его удалить, тогда все заработает.

Итак, мы с вами рассмотрели самые основные и наиболее простые селекторы. Наверняка этих знаний вам хватит, чтобы решить 95% проблем. В следующей статье я опишу некоторые более специфические css селекторы.

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

Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id, и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем .firstline, потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). Table p, в свою очередь, конкретнее, чем просто p. В общем, просто знайте о таких правилах.

Итог

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

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

dolinacoda.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.