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

Начало тут: 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;
  }
  

• E ~ F — второй элемент, который следует после первого, независимо от их удаленности друг от друга. Выбираются все следующие элементы, в отличие от E + F, который выбирает только те, которые находятся непосредственно друг за другом.

  P ~ DIV {
    border-color: yellowgreen;
  }