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:checked
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:checked — выбранная радиокнопка или чекбокс

    INPUT {
      outline: 5px solid #DDD;
    }
    INPUT:checked {
      outline-color: yellowgreen;
    }
  • E:not(s) — элементы, которые не отвечают условию, заданному в скобках

    *:not(DIV) {
      border-color: gold;
    }
    P:not([class="one"]) {
      border-color: skyblue;
    }
Ссылки по теме:
Сколько весят селекторы?
CSS-селекторы одной таблицей
Css-селекторыДревовидный список на CSS
Наверх