Css-селекторы, часть 2

Содержание:
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled, E:disabled
E:not(s)
E ~ F

Начало тут: Css-селекторы.

Селекторы из CSS3

  • E[foo^="bar"] — элемент с заданным атрибутом, значение которого начинается с заданной строки.

    P[data-content^="hello"] {
      border: 2px solid tomato;
      }
  • E[foo$="bar"] — элемент с заданным атрибутом, значение которого заканчивается заданной строкой.

    P[data-content$="hello"] {
      border: 2px solid chartreuse;
      }
  • E[foo*="bar"] — элемент с заданным атрибутом, значение которого содержит заданную строку.

    P[data-content*="hello"] {
      border: 2px solid mediumseagreen;
      }
  • E:root — псевдокласс, представляющий корневой элемент документа. Обычно это тег html.

  • E:nth-child(n)n по счету дочерний элемент.

    P:nth-child(2) {
      border-color: crimson;
      }
    P:nth-child(3) {
      border-color: orange;
      }
    P:nth-child(6) {
      border-color: gold;
      }
    Подробнее про селектор: Nth-child и nth-of-type
  • E:nth-last-child(n)n по счету дочерний элемент, начиная с конца.

    P:nth-last-child(1) {
      border-color: crimson;
      }
    P:nth-last-child(4) {
      border-color: orange;
      }
    P:nth-last-child(5) {
      border-color: gold;
      }
  • E:nth-of-type(n)n по счету дочерний элемент определенного типа.

    P:nth-of-type(1) {
      border-color: crimson;
      }
    P:nth-of-type(3) {
      border-color: orange;
      }
    P:nth-of-type(6) {
      border-color: gold;
      }
  • E:nth-last-of-type(n)n по счету дочерний элемент определенного типа, начиная с конца.

    P:nth-last-of-type(1) {
      border-color: crimson;
      }
    P:nth-last-of-type(4) {
      border-color: orange;
      }
    P:nth-last-of-type(6) {
      border-color: gold;
      }
  • E:last-child — последний дочерний элемент.

    P:last-child {
      border-color: slateblue;
      }
  • E:first-of-type — первый дочерний элемент определенного типа.

    P:first-of-type {
      border-color: orchid;
      }
  • E:last-of-type — последний дочерний элемент определенного типа.

    P:last-of-type {
      border-color: fuchsia;
      }
  • E:only-child — единственный дочерний элемент родителя.

    P:only-child {
      border-color: lightsalmon;
      }
  • E:only-of-type — единственный дочерний элемент такого типа

    P:only-of-type {
      border-color: crimson;
      }
  • E:empty — пустой элемент.

  • E:target — элемент, на который ведет якорь с решеткой в адресе страницы, например http://someurl.com#test

    P:target {
      border-color: orangered;
      }
  • E:enabled, E:disabled — инпуты с разрешенным редактированием и заблокированные.

    INPUT:enabled {
      border: 2px solid orange;
      }
    INPUT:disabled {
      border: 2px solid #EEE;
      color: #CCC;
      }
  • E:not(s) — элементы, которые не отвечают условию, заданному в скобках

    *:not(DIV) {
      border-color: gold;
      }
    P:not([class="one"]) {
      border-color: skyblue;
      }
  • </ul>
Ссылки по теме:
Сколько весят селекторы?
CSS-селекторы одной таблицей
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus