Выделить все элементы css

Селекторы

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

Рассмотрим основные селекторы.

Селектор выделяет каждый элемент на странице. Часто используется для сброса значений элементов значения margin и padding. Считается, что селектор слишком сильно грузит браузер, поэтому стоит его избегать.

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

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

Самый простой селектор. Выбираем определённые теги страницы.

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

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

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

Селектор идентификатора

Знак решётки выделит элемент с указанным идентификатором id.

Селектор :root

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

Селектор :root также часто используется для глобального хранения CSS-переменных. Создайте CSS-переменную с именем —red-color и присвойте ей значение цвета red. Учтите, что все имена переменных CSS должны начинаться с двойного дефиса:

Теперь вы можете использовать CSS-переменную —red-color в качестве значения в стандартных селекторах CSS:

Селектор (*) выполняет те же функции (см. выше). Единственное отличие состоит в том, что селектор * нацелен абсолютно на все элементы в документе, а :root только на контейнер документа без его дочерних элементов.

Комбинации селекторов

Х Y (пробел)

CSS-селектор потомков. Если надо выбрать элементы определённого типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li.

Все остальные ссылки не будут затронуты.

Потомок может быть вложен несколько раз. Например, третий параграф вложен в section, а затем в div, и будет считаться потомком и выводиться жёлтым цветом.

 div p < background-color: yellow; > 
Paragraph 1 in the div.
 
Paragraph 2 in the div.
 
Paragraph 3 in the div.
 
 

Избегайте вложенных селекторов типа Y Z A B.block.

Х > Y (дочерние элементы)

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

 div > p < background-color: yellow; > 
Paragraph 1 in the div.
 
Paragraph 2 in the div.
 
Paragraph 3 in the div.
 
Paragraph 4 in the div.
 
 
Paragraph 5. Not in a div.
 
Paragraph 6. Not in a div.
 

Будут выбраны первый, второй и четвёртый абзацы. Третий является потомком. Пятый и шестой — не входят в div

Х+Y

Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере будет выбран третий параграф, который идёт сразу после div. Первый и второй входят в div, четвёртый идёт после параграфа.

 div + p < background-color: yellow; > 
Paragraph 1 in the div.
 
Paragraph 2 in the div.
 
 
Paragraph 3. Not in a div.
 
Paragraph 4. Not in a div.
 

Х ~ Y

Селектор похож на X + Y, однако, является менее строгим. При использовании ul + p можно выбрать только первый элемент, идущий за Х. В данном случае будут выбраны третий и четвёртый — они идут после div. Первый идёт до div, второй находится внутри div.

 div ~ p < background-color: yellow; >
Paragraph 1.
 
Paragraph 2.
 
 
Paragraph 3.
 Some code. 
Paragraph 4.
 

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

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

 /* unvisited link */ a:link < color: #FF0000; >/* visited link */ a:visited < color: #00FF00; >/* mouse over link */ a:hover < color: #FF00FF; >/* selected link */ a:active

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

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

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

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

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

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

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

 p:first-child < color: blue; >
This is some text.
 
This is some text.
 

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

 p i:first-child < color: blue; >
I am a strong person. I am a strong person.
 
I am a strong person. I am a strong person.
 

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

 p:first-child i < color: blue; >
I am a strong person. I am a strong person.
 
I am a strong person. I am a strong person.
 

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

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

 q:lang(no) < quotes: "~" "~"; >
Some text A quote in a paragraph Some text.
 

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

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

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

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

:nth-child(n)

Селекторы nth-xxx в отдельной статье.

:only-child

Позволяет выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

  
 
Один параграф.
 
 
 
Два параграфа
 
Два параграфа
 
 

Будет выбран p только первого div, потому что он единственный дочерний элемент.

:only-of-type

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

Единственное решение заключается в использовании only-of-type.

:first-of-type

Выбирает первый элемент заданного типа.

 ul:first-of-type > li:nth-child(2)

 ul:first-of-type li:nth-last-child(1)

[title] (атрибуты)

Выбираем все ссылки, имеющие атрибут title. Остальные ссылки останутся не затронутыми.

[href=»Foo»]

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

 a[href="http://webmaster.alexanderklimov.ru"]

Если страница ведёт не на домен, а на страницу домена, то можно использовать регулярные выражения.

X [HREF *= «webmaster.alexanderklimov.ru»]

Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает webmaster.alexanderklimov.ru, http://webmaster.alexanderklimov.ru/contact и т.д.

Если ссылка ведет на какой-то сторонний ресурс, в адресе которого присутствует alexanderklimov, нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.

X[href^=»http»]

Позволяет отображать маленький значок рядом с внешними ссылками? «^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенный выше.

Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://.

X [href$=». JPG»]

Если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

Мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».

X[data-*=»foo»]

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений.

 a[href$=".JPG"], a[href$=". JPEG"], a[href$=".PNG"], a[href$=".GIF"]

Другим возможным решением является применение пользовательских атрибутов. Добавим собственный атрибут data-filetype в каждую ссылку.

Теперь мы можем выделить такие ссылки при помощи данного селектора:

X[foo~=»bar»]

 a[data-info~="external"] < color: red; >a[data-info~="image"]

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

 / * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * / a[data-info~="external"] < color: red; >/ * И которые содержат значения "image" * / a[data-info~="image"]

Источник

CSS селекторы про которые вы могли не знать

В отличие от селектора body, * выделит все элементы на странице:

Думаю, вы уже знаете самые простые способы выбора: p – выберет все теги p (тег параграфа), .my-class – выберет все классы .my-class на странице и #my-id – как вы уже догадались, id (вот это поворот 🙂 ). Стоит отметить, что в современной разработке id стоит использовать лишь в 2 случаях: если вам нужно сделать ссылку на какой-то конкретный элемент страницы (анкор) или если вы используете javascript.

Есть совмещенные селекторы p.my-class – выберет все параграфы с классом .my-class, все остальные элементы на странице выбраны не будут. Стили можно применять для нескольких селекторов:

CSS выбор по иерархии

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

Тег p, h2 и .my-parent не являются родителями или потомками по отношению друг к другу – это рядом лежащие теги, на одном уровне так сказать (обычно вложенность выделяется знаком табуляции или двумя пробелами). Но вот .my-child1 и .my-child2 это потомки .my-parent, и для них .my-parent является родителем.

.my-parent .my-child1 <> /* выберет только один класс my-child1 */ .my-parent div <> /* выберет все лежащие внутри div */ .my-parent > div <> /* выберет div лежащие на 1ом уровне */

Последняя запись означает что класс .little не будет выбран

Как выбрать первый, последний, следующий элемент.

С первым и последним элементом все понятно.

.my-parent > div:first-child <> .my-parent > div:last-child <>

Есть вариант выбирать номер по порядку:

Еще одна важная вещь – как выбрать отрицание:

такой код выберет все, кроме первого div элемента.

А вот на выборе следующего элемента остановимся более детальней. Данный код будет выбирать только те h2 которые идут после p (не забудьте, элементы должны лежать на одном уровне, они не должны быть вложены и т.д.):

Но что делать если нам нужно выбрать все элементы после конкретного селектора?

Этот код выберет все div которые лежат сразу после h2

Как выбрать тег по его атрибуту

Еще один вариант выбора тега по его атрибуту. Предположим что у нас есть такие вот 2 кнопки в форме:

Как видите, у наших кнопок нету классов. Предположим что вам нужно как-то добраться до них:

input[type=text] <> input[type=submit] <>

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

input[type=text]:focus <> input[type=submit]:hover

Напоследок хотелось бы рассказать про, так называемые data- атрибуты. В HTML5 появилась возможность в коде указывать не только стандартные атрибуты, но и произвольные атрибуты, которые могут нам пригодится. Как работают дата атрибуты:

Мы записали текстовую информацию в наш собственный атрибут data-title. Тут может быть любая информация – кстати говоря, отлично подойдет для данных полученных динамическим путем. Наш CSS код:

Мы выводим фразу “Hello, ” сразу перед основным содержимым.
Ну вот и все что я хотел рассказать в этом небольшом обзоре. Почитайте в интернете какие еще есть способы выбора и обязательно попробуйте все что вы узнали на практике 🙂

Источник