Веб-страница может иметь сложную организацию, одни элементы внутри себя могут определять другие элементы. Вложенные элементы иначе
можно назвать потомками. А контейнер этих элементов - родителем.
Например, пусть элемент body на веб-странице имеет следующее содержимое:
Заголовок
Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.
А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка.
Используя специальные селекторы, мы можем стилизовать вложенные элементы или потомков внутри строго определенных элементов. Например, у нас
на странице могут быть параграфы внутри блока с основным содержимым и внутри блока
футера. Но для параграфов внутри блока основного содержимого мы захотим установить один шрифт, а для параграфов футера другой.
Селекторы CSS
Первый абзац
Второй абзац
Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:
#main p{
font-size: 16px;
}
То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.
Здесь стиль применяется к элементам с классом "redLink", которые находятся внутри элемента
. И соответственно браузер
окрасит эти элементы в красный цвет:
Но обратите внимание на пробел: li .redLink . Данный пробел играет большое значение и указывает как раз, что элементы с классом
redLink должны быть вложенными по отношению к элементу
Но если мы уберем пробел:
Li.redLink{
color: red;
}
то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам
, которые имеют класс redLink .
Например, к следующему элементу:
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег
может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type
. При этом добавление правил стиля к селектору INPUT
применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение
в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
В примере 13.1 показано изменение стиля тега
,
в том случае, если к нему добавлен атрибут title
.
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Селекторы атрибутов
Продолжая известный закон Мерфи, который гласит: Если неприятность
может случиться, то она обязательно случится, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом.
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера
,
когда к нему добавляется title
. Обратите
внимание, что для селектора Q
нет нужды повторять стилевые
свойства, поскольку они наследуются от селектора Q
.
Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определённое значение
специфичного атрибута. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное
значение. А во втором — только к определённым селекторам.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Селекторы атрибутов
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
В данном примере рисунок к ссылке добавляется с помощью свойства background
.
В его функции входит создание повторяющейся фоновой картинки, но повторение
фона можно отменить через значение no-repeat
, что
в итоге даст единственное изображение.
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного
текста. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным
текстом. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным
текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для
ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Селекторы атрибутов
Yandex.Com |
Yandex.Ru
В данном примере содержатся две ссылки, ведущие на разные домены — com
и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая
картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href
которых оканчивается на «.ru» или «.com».
Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес
страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль
применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым
атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно,
в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать
такой синтаксис.
[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }
В примере 13.5
показано изменение стиля ссылок, в атрибуте href
которых встречается слово «htmlbook».
Пример 13.5. Стиль для разных сайтов
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Селекторы атрибутов
Шаг за шагом |
Графика для Веб
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения применяется следующий синтаксис.
[атрибут~="значение"] { Описание правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5
CSS 2.1
IE
Cr
Op
Sa 5
Fx
Блок
Заголовок
В данном примере зелёный цвет текста применяется к селектору H3
, если имя класса у слоя задано как block
. Отметим, что аналогичный результат можно получить, если использовать конструкцию *=
вместо ~=
.
Дефис в значении атрибута
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id
и class
. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание правил стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Блок
Термины
Буквица
Выворотка
Выключка
Интерлиньяж
Капитель
Начертание
Отбивка
В данном примере имя класса задано как block-menu-therm
, поэтому в стилях используется конструкция |="block"
, поскольку значение начинается именно с этого слова и в значении встречаются дефисы.
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Вопросы для проверки
1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
INPUT { background: #acdacc; }
INPUT { background: #acdacc; }
INPUT { background: #acdacc; }
INPUT { background: #acdacc; }
INPUT { background: #acdacc; }
2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
Первый абзац
Второй абзац
Третий абзац
P { color: red; }
P { color: red; }
P { color: red; }
P { color: red; }
P { color: red; }
3. К какому элементу будет применяться следующий стиль?
{ background: #666; }
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Ответы
1. INPUT { background: #acdacc; }
2. P { color: red; }
3.
Lorem ipsum dolor sit amet
Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.
1.
* — выделение всех элементов
* {
margin: 0;
padding: 0;
}
Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.
Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.
#container * {
border: 1px solid black;
}
В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
2.
#X
#container {
width: 960px;
margin: auto;
}
Знак решетки перед CSS-селектором выделит нам элемент с id="container" . Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="" , названий тэгов или даже псевдо-классов.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
3 .Х
.error {
color: red;
}
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
4.
Х
Y
li a {
text-decoration: none;
}
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида
Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
5. X
a { color: red; }
ul { margin-left: 0; }
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {}
Мы используем псевдо-класс:link , для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited .
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
7.
Х
+Y
ul + p { color: red; }
Выделяет последующий элемент. Он будет выбирать только
элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
8.
Х
>Y
div#container > ul { border: 1pxsolidblack; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
Элемент списка
Дочерний элемент
Элемент списка
Элемент списка
Элемент списка
CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul , являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
9.
Х
~ Y
ul ~ p { color: red; }
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
10.
X
a { color: green; }
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
11.
X
a { color: #ffde00; }
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
12.
X
a { color: # 1f6053; }
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь
в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage
и т.д.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
13.
X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец
строки.
Совместимость
IE7 +
Firefox
Safari
Опера
14.
X
a { color: red; }
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».
Совместимость
IE7 +
Firefox
Safari
Опера
15.
X
a{ color: red; }
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A,
a,
a,
a {
color: red;
}
Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
Ссылка на изображение
A { color: red; }
Совместимость
IE7 +
Firefox
Safari
Опера
16.
X
a { color: red; }
a { border: 1pxsolidblack; }
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
" Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
IE7 +
Firefox
Safari
Опера
17.
X:checked
input:checked { border:1pxsolidblack; }
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
IE9 +
Firefox
Safari
Опера
18.
X:after
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Этот хак
использует:after чтобы добавить пробел после элемента, а запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
IE8 +
Firefox
Safari
Опера
19.
X:hover
div:hover { background: #e3e3e3; }
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1pxsolidblack; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
Совместимость
IE6 + (В IE6: hover должен быть применен к ссылке)
Firefox
Safari
Опера
20.
X:not(selector)
div:not(#container) { color: blue; }
Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
IE9 +
Firefox
Safari
Опера
21.
X::
псевдо
элемент
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации»
Совместимость
IE6 +
Firefox
Safari
Опера
22.
X:nth-child(n)
li:nth-child(3) { color: red; }
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость
IE9 +
Firefox 3,5 +
Safari
23.
X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
24.
X:nth-of-type(n)
ul:nth-of-type(3) { border: 1pxsolidblack; }
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость
IE9 +
Firefox 3,5 +
Safari
25.
X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1pxsolidblack; }
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
26.
X:first-child
ul li:first-child { border-top: none; }
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
IE7 +
Firefox
Safari
Опера
27.
X:last-child
ul > li:last-child { color: green; }
В противоположность:first-child:last-child выбирает последний дочерний элемент.
Совместимость
IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child . Microsoft-у привет!)
Firefox
Safari
Опера
28.
X:only-child
div p:only-child { color: red; }
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
IE9 +
Firefox
Safari
Опера
29.
X:only-of-type
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
Ul > li:only-of-type { font-weight: bold; }
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
30.
X:first-of-type
first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.
Parent()
Возвращает родительские элементы всех элементов первоначального обернутого набора, расположенные на один уровень выше. Параметры
селектор
Parents()
Возвращает новый набор, содержащий родительские элементы всех элементов первоначального обернутого набора. В их число входят прямые предки, а также все остальные родительские элементы, за исключением корневого элемента документа. Параметры
селектор
Children()
Возвращает новый набор, содержащий уникальные дочерние элементы (находящиеся на первом уровне вложенности) обернутых элементов. Параметры
селектор
Closest()
Возвращает обернутый набор, содержащий единственный элемент ближайшего предка, соответствующий указанному селектору. Переходит по цепочке родительских элементов вверх и останавливается при первом совпадении с селектором, указанным в круглых скобках. Параметры
селектор
Prev()
Переходит к следующему элементу с тем же родителем, находящемся слева. Возвращает обернутый набор, состоящий из уникальных соседних элементов, предшествующих элементам первоначального обернутого набора. Параметры
селектор
PrevUntil()
Возвращает обернутый набор, содержащий все соседние элементы, предшествующие элементам первоначального обернутого набора, за исключением элемента, соответствующего селектору. Параметры
селектор
Next()
Переходит к следующему элементу с тем же родителем, находящемся справа. Возвращает обернутый набор, состоящий из уникальных соседних элементов, следующих за элементами первоначального обернутого набора. Параметры
селектор
NextAll()
Возвращает обернутый набор, содержащий все соседние элементы, следующие за элементами первоначального обернутого набора. Параметры
селектор
NextUntil()
Возвращает обернутый набор, содержащий все соседние элементы, следующие за элементами первоначального обернутого набора, за исключением элемента, соответствующего селектору. Параметры
селектор
Siblings()
Обходит все элементы одного уровня с выбранным элементом. Возвращает обернутый набор, содержащий уникальные соседние элементы, находящиеся на одном уровне вложенности с элементами первоначального обернутого набора. Параметры
селектор
Is()
Проверяет обернутый набор на наличие, по крайней мере, одного элемента, соответствующего заданному селектору. Возвращает true , если заданному селектору соответствует хотя бы один элемент, в противном случае false . Параметры
селектор
Find()
Возвращает новый обернутый набор, содержащий все элементы, дочерние по отношению к элементам из первоначального набора, соответствующие заданному селектору. Параметры
селектор
Size()
Возвращает количество элементов в обернутом наборе. Параметры
нет
Get()
Возвращает один элемент в соответствии с заданным индексом или массив элементов, если параметр не указан. Отрицательный индекс ведет отсчет с конца обернутого набора элементов. Параметры
число, задающее индекс возвращаемого элемента
ToArray()
Возвращает массив элементов, содержащихся в обернутом наборе. Параметры
нет
Index()
Возвращает порядковый номер заданного элемента обернутого набора. Если указанный элемент отсутствует, возвращается значение -1 . Если параметр не задан, возвращает индекс первого элемента среди элементов одного уровня вложенности. Параметры
элемент или селектор, определяющие или идентифицирующие ссылку на элемент
Add()
Возвращает новый набор, содержащий копию элементов первоначального набора, в который добавлены элементы, определенные параметром. Параметры
элемент, селектор, массив элементов, фрагмент html-разметки
Each()
Позволяет перебрать все элементы выборки страницы и произвести серию действий над каждым из них. Вызываемой функции передаются два параметра — индекс элемента набора и сам элемент, который устанавливается в качестве контекста функции this . Параметры
функция
Map()
Вызывает функцию для каждого элемента в обернутом наборе и возвращает полученные значения в виде массива JavaScript. Функции передаются два параметра — индекс элемента внутри набора и сам элемент. Параметры
функция
End()
Используется внутри цепочки методов jQuery, возвращает предыдущий обернутый набор, чтобы применить к нему последующие операции. Параметры
нет
AndSelf()
Объединяет два самых верхних обернутых набора в единый набор. Параметры
нет
2. Фильтрующие методы
First()
Возвращает из обернутого элемента только первый элемент. Параметры
нет
Eq()
Возвращает из обернутого набора только один элемент. Отрицательное значение индекса ведет отсчет с конца набора. Параметры
число, соответствующее индексу возвращаемого элемента
Last()
Возвращает из обернутого элемента только последний элемент. Параметры
нет
Slice()
Возвращает набор элементов, содержащий элемент с начальным индексом и элементы до конечного индекса. Если конечный индекс отсутствует, то элементы от начального и до конца набора. Отрицательный индекс ведет отсчет элементов с конца набора, -1 вернет последний элемент. Параметры
начальный индекс, конечный индекс (не обязательно)
Filter()
Удаляет из обернутого набора элементы, не соответствующие правилу отбора. Возвращает копию первоначального обернутого набора, из которого удалены указанные элементы. Если параметром является функция, она будет вызвана для каждого элемента в наборе, чтобы проверить, соответствует ли элемент заданному критерию отбора. Если для элемента будет возвращено значение false , то он будет удален из набора. Параметры
Not()
Удаляет из выбранного множества все элементы, соответствующие заданному выражению селектора. Возвращает копию первоначального обернутого набора, из которого удалены указанные элементы. Если параметром является функция, она будет вызвана для каждого элемента в наборе, чтобы проверить, соответствует ли элемент заданному критерию отбора. Если для элемента будет возвращено значение false , то он будет удален из набора. Параметры
элемент, селектор, массив или функция
Has()
Возвращает новый обернутый набор, содержащий элементы из первоначального набора, имеющие вложенные элементы, соответствующие заданному параметру. Параметры
элемент или селектор
Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и.class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.
#id
(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.
*
Выбирает, объединяет все элементы (Пр. *)
{
background-color:yellow;
})
element
(Пр. p) Объединяет все элементы тега p.
element,element
(Пр. div,p) Объединяет все элементы div и все элементы p
. Так же в эту группу можно выделить похожие селекторы:
element element
(Пр. div p) Выбирает все элементы p внутри div.
element>element
(Пр. div>p) Объединяет все p для которых родителем выступает div.
element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div. (Пр. ) Объединяет все элементы с атрибутом target (Пр. ) Объединяет все элементы с заданным target="_blank" (Пр. ) Объединяет все элементы, которые в своем title содержат «Apple» (Пр. ) Объединяет все элементы с атрибутом class начиння с «top»
Все теги написаны были без "<>".
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач - от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:link
(Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить
:active
(Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
:hover
(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль
:focus
(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем
:first-letter
(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента
:first-line
(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются
:first-child
(Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:
:before
(Пр. p:before)
:after
(Пр. p:after)
Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1~element2
(Пр. p~ul) p~ul
{
background:red;
}
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
A div element.
Item
Item
Item
- в этом случае ничего не произойдет, а в
Item
Item
Item
а в этом случае поля Айтемов будут иметь бэк-цвет - красный. (Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
item1
item2
item3
Item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4. (Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:
Item1
Item2
Item3
Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3. (Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
item1
item2
item3
Item4
В этом примере результатом будут закрашенные строки item1, item3, item4.
:first-of-type
(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.
:last-of-type
(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.
:only-of-type
(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1).
:only-child
(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя
Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):
:nth-child(n)
(Пр. p:nth-child(2)) Для каждого
Который является вторым дочерним элементом у родителя.
:nth-last-child(n)
(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.
:nth-of-type(n)
(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.
:nth-last-of-type(n)
(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.
:last-child
(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.
Также стоит выделить:
:root
(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря - .
:empty
(Пр. p:empty) Определяет пустые элементы - без каких-либо дочерних элементов, текста или пробелов.
:target
(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id - #news element. Используется для URL.
:enabled
(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным - disabled) элементам форм, простите за тавтологию.
:disabled
(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.
:checked
(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.
:not(selector)
(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.
.</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}