Html selector: Селекторы | htmlbook.ru

Содержание

Селекторы тегов | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

E { Описание правил стиля }

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   p { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зелёный цвет текста */
   }
  </style>
 </head> 
 <body>
  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>
 </body>
</html>

В данном примере изменяется цвет текста и выравнивание текста параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <p> (рис. 1).

Рис. 1. Применение стиля к селектору p

CSS-селекторы - Веб-технологии для разработчиков

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

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы

Универсальный селектор
Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.
Селекторы по типу элемента
Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.
Селекторы по классу
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index").
Селекторы по идентификатору
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. 
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc").
Селекторы по атрибуту
Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор [autoplay] выберет все элементы, у которых есть  атрибут autoplay (независимо от его значения).
Ещё пример: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".
Ещё пример: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".

Комбинаторы

Комбинатор запятая
Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента - и <div> и <span>.
Комбинатор потомков
Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.
Дочерние селекторы
Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.
Комбинатор всех соседних элементов
Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.
Комбинатор следующего соседнего элемента
Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который  находится непосредственно после элемента <ul>.

Псевдо

Псевдоклассы
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус "посещённые".
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
Псевдоэлементы
Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Версии CSS

Спецификация Статус Комментарии
Selectors Level 4 Рабочий черновик Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
Selectors Level 3 Рекомендация Добавлен комбинатор ~ и древовидные структурные псевдоклассы.
Сделаны псевдоэлементы, использующие префик :: двойное двоеточие. Селекторы дополнительных атрибутов.
CSS Level 2 (Revision 1) Рекомендация Добавлен комбинатор потомков > и комбинатор следующего соседа + .
Добавлен универсальный (*)  комбинатор и селектор атрибутов.
CSS Level 1 Рекомендация Первоначальное определение.

См. также

CSS специфичность

Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения
Всем добра!

Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».

Поехали.

Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:

…
<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”>Нажми меня</button>
            </div>
        </div>
    </div>
</form>
…

и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:
.button_submit

Добро пожаловать в мир CSS.

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:


<form class=“afhfsdh__”>
    <div>
        <div class=“hfgeyq fjjs qurlzn”>
            <div class=“fjdfmzn fjafjd”>
                <button type=“submit” class=“ajffalf wjf_fjaap”></button>
            </div>
        </div>
    </div>
</form>
…

(все названия css классов уменьшены с помощью оптимизатора)

, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’], вместо XPath: //form//button[@type=‘submit’]

Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).

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

Смотрите:


<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <button type=“submit” class=“button_submit wrapper_button”></button>
            </div>
        </div>
    </div>
</form>

css для элемента button: .button_submit, при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button. Порядок классов роли не играет, поэтому их можно поменять местами:

 .wrapper_button.button_submit .

Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –
css: button.

И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::
button.button_submit

и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут

data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’]. Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id]. Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’], но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit. Соединять все вместе также достаточно просто:

button[type=‘submit’].button_submit
тег   атрибут        класс

Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:
<form class=“form_upload> <div> <div class=“row_element_3 row tile_fixed”> <div class=“button_cell wrapper_tile”> <button type=“submit” class=“button_submit wrapper_button”></button> </div> </div> </div> </form>
css:form > div > div > div > button.button_submit

и знак > позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “. Используя данный указатель мы можем быстро найти элемент внутри формы:

Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit

Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span:


<form class=“form_upload>
    <div>
        <div class=“row_element_3 row tile_fixed”>
            <div class=“button_cell wrapper_tile”>
                <div class=“content”></div>
                <span data-id=“link”>Ссылка</span> <!-- элемент с атрибутом data-id -->
                <button type=“submit” class=“button_submit wrapper_button”> <!-- искомая кнопка --></button>
            </div>
        </div>
    </div>
</form>

[data-id=‘link’] + button найдет button, у которого выше на один уровень есть родственник с атрибутом data-id=”link”. Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.

NOTE:

div + span[data-id=‘link’] + button

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

Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’]

— из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’].

Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.

a[href^=“https:”] — найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”] — найдет все ссылки, которые заканчиваются на .pdf.

Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:


<div class=“tiles”>
    <div class=“tile”>…</div>
    <div class=“tile”>…</div>
</div>

Как найти второй div class=“tile” у div class=“tiles”? Варианта два:
div > div:nth-of-type(2) div > div:nth-child(2)

Но в чем различие между этими двумя селекторами? Дополним пример:

<div class=“tiles”>
	<a class=“link”>…</a> <!—1—>
	<div class=“tile”>…</div><!—2—>
	<div class=“tile”>…</div><!—3—>
</div>

css 1 вариант: div > div:nth-of-type(2)
css 2 вариант: div > div:nth-child(2)

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

Разгадка:

первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div, который является потомком родителя . Второй

<div>
у элемента
<div class=“tiles”>
это третья строка. В свою очередь nth-of-type ищет второй элемент у родителя
<div class=“tiles”>
, который должен являться тегом
div
, это строка номер два.

Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child, и тогда вам будет неважно, куда поместят ссылку

<a>
: наверху, между
<div>
или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.

Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”]. А что если есть существует более быстрый способ поиска по id элемента?

#value. “#” - указатель, что поиск осуществляется по id.

Используя все приобретенные навыки попробуйте написать селектор для кнопки
<button>

Отправить
…
<div>
    <div class=“tile_wrapper tile content”>
        <div class=“row row_content”>
            <div class=“outline description__on”></div>
            <div class=“outline description__off button_send hover_mouse”>
                <button class=“outline button_send”>Отправить</button>
            </div>
        </div>
    </div>
</div>

Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.

Спасибо!

CSS Селекторы



CSS Селекторы

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

Можно разделить CSS селекторы на пять категорий:

На этой странице будут объяснены самые основные CSS селекторы.


CSS Селектор элементов

Селектор элементов выбирает HTML элементы на основе имени элемента.

Пример

Здесь все элементы <p> на странице будут выравниваненны по центру, с красным цветом текста:

p {
  text-align: center;
  color: red;
}

Посмотреть код »

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

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

Идентификатор элемента является уникальным в пределах страницы, поэтому селектор id используется для выбора одного уникального элемента!

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

Пример

Приведенное ниже правило CSS будет применено к элементу HTML с помощью: 

#para1 {
  text-align: center;
  color: red;
}

Посмотреть код »

Примечание: Имя идентификатора не может начинаться с цифры!



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

Селектор классов выбирает HTML элементы с определенным атрибутом класса.

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

Пример

В этом примере все HTML-элементы с будут красными и выровненными по центру:

.center {
  text-align: center;
  color: red;
}

Посмотреть код »

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

Пример

В этом примере только элементы <p> с будут выровнены по центру:

p.center {
  text-align: center;
  color: red;
}

Посмотреть код »

HTML элементы также могут ссылаться на несколько классов.

Пример

В этом примере элемент <p> будет стилизован в соответствии с и с:

<p>Этот пункт относится к двум классам.</p>

Посмотреть код »

Примечание: Имя класса не может начинаться с цифры!


CSS Селектор универсальный

Универсальный селектор (*) выбирает все HTML элементы на странице.

Пример

Приведенное ниже правило CSS влияет на каждый элемент HTML на странице:

* {
  text-align: center;
  color: blue;
}

Посмотреть код »

CSS Селектор группирования

Селектор группирования выбирает все HTML элементы с одинаковыми определениями стилей.

Посмотрите на следующий код CSS (элементы h2, h3 и p имеют одинаковые определения стилей):

h2 {
  text-align: center;
  color: red;
}

h3 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

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

Чтобы сгруппировать селекторы, отделите каждый селектор запятой.

Пример

В этом примере мы сгруппировали селекторы из приведенного выше кода:

h2, h3, p {
  text-align: center;
  color: red;
}

Посмотреть код »

Проверьте себя с помощью упражнений!


Все CSS простые селекторы

Селектор Пример Описание
.class .intro Выбирает все элементы с
#id #firstname Выбирает элемент с
* * Выбирает все элементы
element p Выбирает все элементы <p>
element,element,.. div, p Выбирает все элементы <div> и <p>

- Веб-технологии для разработчиков

selectChrome Полная поддержка Да
Полная поддержка Да
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Полная поддержка 12Firefox Полная поддержка 1
Полная поддержка 1
Замечания Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка Да
Полная поддержка Да
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android Полная поддержка Да
Полная поддержка Да
Замечания In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android Полная поддержка Да
Полная поддержка Да
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Firefox Android Полная поддержка 4
Полная поддержка 4
Замечания Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка Да
Полная поддержка Да
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android Полная поддержка Да
Полная поддержка Да
Замечания border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
autofocusChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
disabledChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
formChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
multipleChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
nameChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
requiredChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
sizeChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Селекторы атрибутов - Веб-технологии для разработчиков

Обзор

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

[attr]
Обозначает элемент с атрибутом по имени attr.
[attr=value]
Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
[attr~=value]
Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
[attr|=value]
Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.
[attr^=value]
Обозначает элемент с именем атрибута attr значение которого начинается с "value"
[attr$=value]
Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
[attr*=value]
Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.

Пример

/* Все span с атрибутом "lang" будут жирными */
span[lang] {font-weight:bold;}
 
/* Все span в Португалии будут зелеными */
span[lang="pt"] {color:green;}

/* Все span с американским английским будут синими */
span[lang~="en-us"] {color: blue;}

/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
span[lang|="zh"] {color: red;}

/* Все внутренние ссылки будут иметь золотой фон */
a[href^="#"] {background-color:gold}

/* Все ссылки с url заканчивающимся на .cn будут красными */
a[href$=".cn"] {color: red;}

/* Все ссылки содержащие "example" в url будут иметь серый фон */
a[href*="example"] {background-color: #CCCCCC;}
<div>
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div>
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

Спецификации

Совместимость с браузерами

Функциональность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) 1.0 (1.7 или ранее) 7 9 3
Функциональность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? 1.0 (1) ? ? ?

См. также

CSS селекторов


CSS селекторов

CSS-селекторы используются для «поиска» (или выбора) HTML-элементов, которые вы хочу стиль.

Мы можем разделить селекторы CSS на пять категорий:

На этой странице будут описаны самые основные CSS-селекторы.


CSS-элемент Selector

Селектор элементов выбирает элементы HTML на основе имени элемента.

Пример

Здесь все элементы

на странице будут по центру, с красным цветом текста:

п {
выравнивание текста: по центру;
красный цвет;
}

Попробуй сам "

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

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

Идентификатор элемента является уникальным на странице, поэтому селектор идентификатора привык к выберите один уникальный элемент!

Чтобы выбрать элемент с определенным идентификатором, введите символ хеша (#), а затем идентификатор элемента.

Пример

Правило CSS ниже будет применено к элементу HTML с:

# para1 {
выравнивание текста: по центру;
красный цвет;
}

Попробуй сам "

Примечание: Идентификационное имя не может начинаться с цифры!



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

Селектор класса выбирает элементы HTML с определенным атрибутом класса.

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

Пример

В этом примере все элементы HTML с красным цветом и по центру:

.center {
выравнивание текста: центр;
цвет: красный;
}

Попробуй сам "

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

Пример

В этом примере только

элементы будут выровнены по центру:

п.центр {
выравнивание текста: центр;
цвет: красный;
}

Попробуй сам "

элементов HTML также может относиться к более чем одному классу.

Пример

В этом примере элемент

будет стилизован в соответствии с и до:

Этот абзац относится к двум классам.

Попробуй сам "

Примечание: Имя класса не может начинаться с цифры!


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

Универсальный селектор (*) выделяет весь HTML элементы на странице.

Пример

Приведенное ниже правило CSS будет влиять на каждый элемент HTML на странице:

* {
выравнивание текста: по центру;
цвет синий;
}

Попробуй сам "

Селектор группировки CSS

Селектор группировки выбирает все элементы HTML в одном стиле определения.

Посмотрите на следующий код CSS (элементы h2, h3 и p имеют одинаковые определения стиля):

h2 {
выравнивание текста: по центру;
цвет: красный;
}

ч3 {
выравнивание текста: по центру;
цвет: красный;
}

р {
выравнивание текста: по центру;
цвет: красный;
}

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

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

Пример

В этом примере мы сгруппировали селекторы из кода выше:

h2, h3, p {
выравнивание текста: по центру;
цвет: красный;
}

Попробуй сам "

Проверь себя упражнениями!


Все простые CSS селекторы

Селектор Пример Пример описания
класс .intro Выбирает все элементы с
# id # имя Выбирает элемент с
* * Выбирает все элементы
элемент р Выбирает все элементы

элемент, элемент ,., div, p Выбирает все элементы
и все элементы


,

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

Элемент
Селектор Пример Пример описания
класс .intro Выбирает все элементы с
.class1.class2 .name1.name2 Выбирает все элементы с name1 и name2 set в своем классе атрибута
.class1 .class2 .name1 .name2 Выбирает все элементы с name2 , который является потомком элемент с именем 1
# id # имя Выбирает элемент с
* * Выбирает все элементы
элемент р Выбирает все элементы

элемент.класс p.intro Выбирает все элементы

с

, элемент дел, р Выбирает все элементы
и все элементы

элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент является элементом

элемент + элемент div + p Выбирает все элементы

, которые размещаются сразу после элементов

элемент1 ~ элемент2 р ~ ул Выбирает каждый элемент
    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[атрибут = значение ] [target = _blank] Выбирает все элементы с target = "_ blank"
[ атрибут ~ = значение ] [название ~ = цветок] Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок»
[ атрибут | = значение ] [lang | = ru] Выбирает все элементы со значением атрибута lang, начинающимся с "en"
[атрибут = значение ] a [href ^ = "https"] Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $ = значение ] a [href $ = ".pdf "] Выбирает каждый элемент , значение атрибута href которого заканчивается на ".pdf"
[ атрибут * = значение ] a [href * = "w3schools"] Выбирает каждый элемент , значение атрибута href которого содержит подстроку "w3schools"
: активный а: активный Выбирает активную ссылку
:: после р :: после Вставьте что-нибудь после содержимого каждого элемента

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

: проверено вход: проверено Выбирает каждый отмеченный элемент
: по умолчанию вход: по умолчанию Выбирает элемент по умолчанию
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто р: пусто Выбирает каждый элемент

, который не имеет дочерних элементов (включая текстовые узлы)

: включено вход: включен Выбирает каждый включенный элемент
: первый ребенок р: первый ребенок Выбирает каждый элемент

, который является первым дочерним элементом его родителя

:: первая буква р :: первая буква Выбирает первую букву каждого элемента

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

: первый тип р: первый тип Выбирает каждый элемент

, который является первым элементом

его родителя

: фокус вход: фокус Выбирает элемент ввода, который имеет фокус
: зависание а: зависание Выбирает ссылки на мышь над
: в диапазоне вход: в диапазоне Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный вход: неопределенный Выбирает элементы ввода, которые находятся в неопределенном состоянии
: недействительно ввод: недействительный Выбирает все входные элементы с недопустимым значением
: язык (, язык ), p: lang (it) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

: последний ребенок р: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом его родителя

: последний тип р: последний тип Выбирает каждый элемент

, который является последним элементом

его родителя

: ссылка а: ссылка Выбирает все не посещенные ссылки
: нет ( селектор ) : нет (р) Выбирает каждый элемент, который не является элементом

: n-й ребенок ( n ) р: nth-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом его родителя

: nth-last-child ( n ) р: nth-last-child (2) Выбирает каждый элемент

, являющийся вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type ( n ) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

его родителя, начиная с последнего дочернего элемента

: nth-of-type ( n ) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

его родителя

: единственный в своем роде р: единственный в своем роде Выбирает каждый элемент

, который является единственным элементом

своего родителя

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

, который является единственным потомком своего родителя

: опционально вход: опционально Выбирает элементы ввода без атрибута «обязательный»
: вне диапазона вход: вне диапазона Выбирает элементы ввода со значением за пределами указанного диапазона
:: заполнитель вход :: заполнитель Выбирает элементы ввода с указанным атрибутом placeholder
: только для чтения вход: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения»
: чтение-запись вход: чтение-запись Выбирает элементы ввода с атрибутом «только для чтения», НЕ указан
: требуется вход: требуется Выбирает элементы ввода с указанным атрибутом «required»
: корень : корень Выбирает корневой элемент документа
:: выбор :: выбор Выбирает часть элемента, которая выбрана пользователем
: цель # новости: цель Выбирает текущий активный элемент #news (нажал на URL, содержащий это имя якоря)
: действительный ввод: действительный Выбирает все входные элементы с допустимым значением
: посетил : посетил Выбирает все посещенные ссылки
.

HTML выберите тег


Пример

Создайте раскрывающийся список с четырьмя опциями:

Выберите автомобиль:

<выберите name = "cars">

Попробуй сам "

Ниже приведены примеры "Попробуйте сами".


Определение и использование

Элемент чаще всего используется в форме для сбора пользовательского ввода.

Атрибут name необходим для ссылки данные формы после отправки формы (если вы опустите атрибут name , данные из раскрывающегося списка не будут отправлены).

Атрибут id необходим для связи выпадающий список с меткой.

Теги


Атрибуты события

Тег с тегами :

Попробуй сам "

Связанные страницы

HTML DOM ссылка: Выбрать объект

Руководство по CSS: стилизация форм


Настройки CSS по умолчанию

Нет.


,

CSS атрибутов выбора


HTML-элементы стиля

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

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


CSS [атрибут] Селектор

Селектор [атрибут] используется для выбора элементов с указанным атрибут.

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


CSS [attribute = "value"] Селектор

Селектор [attribute = "value"] используется для выбора элементов с указанным атрибут и значение.

В следующем примере выбираются все элементы с атрибутом target = "_ blank":


CSS [attribute ~ = "value"] Селектор

Селектор [attribute ~ = "value"] используется для выбора элементов с атрибутом значение, содержащее указанное слово.

В следующем примере выбираются все элементы с атрибутом title, который содержит разделенный пробелами список слов, одним из которых является «цветок»:

Приведенный выше пример будет соответствовать элементам с title = "flower", title = "summer flower ", и title =" flower new ", но не title =" my-flower "или title =" flowers ".



CSS [attribute | = "value"] Селектор

Селектор [attribute | = "value"] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.

В следующем примере выбираются все элементы со значением атрибута класса, которое начинается с «top»:

Примечание: Значение должно быть целым словом, либо одно, как class = "top" или за ним следует дефис (-), например!


CSS [attribute ^ = "value"] Селектор

Селектор [attribute ^ = "value"] используется для выбора элементов, атрибут которых значение начинается с указанного значения.

В следующем примере выбираются все элементы со значением атрибута класса, которое начинается с «top»:

Примечание: Значение не должно быть целым словом!


CSS [attribute $ = "value"] Селектор

Селектор [attribute $ = "value"] используется для выбора элементов, атрибут которых значение заканчивается указанным значением.

В следующем примере выбираются все элементы со значением атрибута класса, которое заканчивается «тестом»:

Примечание: Значение не должно быть целым словом!


CSS [attribute * = "value"] Селектор

Селектор [attribute * = "value"] используется для выбора элементов, атрибут которых значение содержит указанное значение.

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

Примечание: Значение не должно быть целым словом!


Формы для укладки волос

Селекторы атрибутов могут быть полезны для оформления форм без класса или идентификатора:

Пример

входной [тип = «текст»] {
ширина: 150 пикселей;
дисплей: блок;
нижнее поле: 10 пикселей;
цвет фона: желтый;
}

вход [type = "button"] {
ширина: 120 пикселей;
поле слева: 35 пикселей;
дисплей: блок;
}

Попробуй сам "

Подсказка: Посетите наш учебник по CSS-формам, чтобы получить дополнительные примеры того, как стилизовать формы с помощью CSS.


Проверь себя упражнениями!


Все селекторы атрибутов CSS

Селектор Пример Пример описания
[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [target = _blank] Выбирает все элементы с target = "_ blank"
[ атрибут ~ = значение ] [title ~ = flower] Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок»
[ атрибут | = значение ] [lang | = en] Выбирает все элементы со значением атрибута lang, начинающимся с "en".
[ атрибут ^ = значение ] a [href ^ = "https"] Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $ = значение ] a [href $ = ".pdf "] Выбирает каждый элемент , значение атрибута href которого заканчивается на ".pdf"
[ атрибут * = значение ] a [href * = "w3schools"] Выбирает каждый элемент , значение атрибута href которого содержит подстроку "w3schools"

,

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

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