First child css не работает

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>first-child</title>  <style>  B:first-child {  color: red; /* Красный цвет текста */  }  </style>  </head>  <body>  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet   dolore magna aliguam erat volutpat.</p>  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo   consequat</b>.</p>  </body> </html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.


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

Рис. 1. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Меню</title>  <style>  .links {   background: #F6967D; /* Цвет фона */  }  .links a {  color: #FFFDEB; /* Цвет ссылок */  display: inline-block; /* Строчно-блочный элемент */  border-left: 1px solid #B62025; /* Параметры рамки слева */  padding: 5px 10px; /* Поля вокруг ссылок */  }  .links a:first-child {  border-left: none; /* Убираем первую линию слева */  }  </style>  </head>  <body>  <div class="links">  <a href="page/1.html">uno</a>  <a href="page/2.html">dos</a>  <a href="page/3.html">tres</a>  <a href="page/4.html">cuatro</a>  </div>  </body> </html>

Результат данного примера показан на рис. 2.

Ссылки с линией слева

Рис. 2. Ссылки с линией слева

webref.ru

CSS-псевдоклассы


Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.

Примерами псевдоклассов являются «первая строка в контейнере», «первая буква в слове», «первый дочерний элемент у родителя». Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.

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

Выбор первого элемента

Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.

Найдем первые элементы в двух простых HTML-структурах.

<!-- 1. простой список -->  <ul>   <li>Первый пункт</li>   <li>Второй пункт</li>   <li>Третий пункт</li>  </ul>    <!-- 2. абзац с форматированным текстом -->  <p>  Есть только <b>два способа</b> прожить жизнь. <i>Первый</i> - будто чудес не существует. <i>Второй</i> - будто кругом одни чудеса. <a href="#">Альберт Эйнштейн</a>  </p>      

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

<!-- 1. простой список -->   <li>Первый пункт</li>    <!-- 2. абзац с форматированным текстом -->  <b>два способа</b>  

Синтаксис

Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.

b:first-child {   text-decoration: underline;  }

Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

<ul>   <li>   Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.    <i>Лев Толстой</i>   </li>   <li>   Тот, кто умеет, <b>тот делает</b>, кто не умеет - <b>тот учит других</b>.    <i>Бернард Шоу</i>   </li>  </ul>  

На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса :first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

.class:first-child {}  [alt]:first-child {}  *:first-child {}    

Типичные ошибки

Псевдокласс первого элемента first-child в CSS выбирает строго тег, находящийся на первом месте в родительском контейнере. Даже если элемент полностью соответствует селектору, но не является первым потомком, он не будет выбран.

Для примера возьмем предыдущий список цитат и перенесем авторов в начало.

<ul>   <li>   <i>Лев Толстой</i>   Все хотят изменить <b>мир</b>, но никто не хочет измениться <b>сам</b>.    </li>   <li>   <i>Бернард Шоу</i>   Тот, кто умеет, <b>тот делает</b>, кто не умеет - <b>тот учит других</b>.    </li>  </ul>  

Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.

Еще одной ошибкой является игнорирование тега <br>. Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.

Учет типа элемента

Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.

b:first-of-type {   text-decoration: underline;  }    

Теперь при подсчете учитываются только элементы, соответствующие селектору b.

Выбор последнего элемента

Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.

fb.ru

Потестил эту муть немного, инфу поискал. Вот что вышло…

Короче :last-of-type как и :nth-last-of-type работают исправно и аналогично-противоположно(аля словоблуд) как и :first-of-type ,просто есть одна важная особенность.

Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .

Короткое и ясное правило для использования этого псевдо класса: (путь к последнему такому дочерному тегу родителя):last-of-type

Дальше примеры:
.

  1. http://jsfiddle.net/djvgaw57/
    Класс box выставлен в трех тегах <div> и стиль применится к последнему тегу <div> из всей трехэлементной последовательности тегов <div> .
    .
  2. http://jsfiddle.net/mkj7fatu/
    Класс box у двух последовательностей — выбирается последний тег в каждой последовательности.
    .
  3. http://jsfiddle.net/jbffqkLh/
    Оказывается даже не важно какие классы будут у тегов, которые находятся в последовательности, и которые не являются последним тегом в последовательности. Важен класс только последнего тега в последовательности.
    .

  4. http://jsfiddle.net/fn4s14gn/
    При изменении класса последнего тега в последовательности — стили не накладываются на последний тег, и собсно все.
    .
  5. http://jsfiddle.net/9fjppk95/
    Но если такой класс присутствует в последнем теге последовательности таких же тегов — стили накладываются и все работает.
    .
  6. http://jsfiddle.net/56kqvyzg/
    Всегда ведь можно импровизировать.
    .
  7. http://jsfiddle.net/zn3mq0mo/ Вот это самая интересная!
    Класс box у тега <div> и <span> ,
  • Все <div>‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный <div> этого родителя;
  • Все <span>‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный <span> этого родителя;
    .
  1. Еще раз перечитай правило и зырь сюда http://jsfiddle.net/515pg3j2/ , сечешь?
    Только последний дочерный тег родителя из всех таких же дочерный тегов этого же родителя.
    .
  2. Ну и на финал http://jsfiddle.net/nag633rc/

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

Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе

forum.academy

Дочерние селекторы CSS


В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам <p>, которые являются дочерними по отношению к <body>, не затрагивая остальные <p> (например, <p>, дочерние по отношению к <div>).
Как это сделать? Очень просто: создадим дочерний селектор:

  body > p {  	color: #333;  }  

Обратите внимание на символ > после body. С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов <p> родителя <body>. Если символ убрать, то стиль применится абсолютно ко всем тегам <p>, которые находятся внутри тега <body>, хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».


  • :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
  • :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
  • :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
  • :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
  • :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
  • :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
  • :nth-of-type – по принципу работы похож на :nth-child, но ориентируется на тип элемента;
  • :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

Пример использования :first-child, :last-child и :nth-child

  <!-- HTML -->  <div>  <p>Первый ребенок</p>  <p>Второй ребенок</p>  <p>Третий ребенок</p>  <table>  <tr>   <td>Нечетный номер</td>  </tr>  <tr>   <td>Четный номер</td>  </tr>  <tr>   <td>Нечетный номер</td>  </tr>  <tr>   <td>Четный номер</td>  </tr>  </table>  <p>Последний ребенок</p>  </div>  

Стиль CSS:

  /* CSS */  p:first-child {   font-weight: bold;   text-transform: uppercase;  }    p:last-child {   font-style: italic;   font-size: 0.8em;  }    p:nth-child(3) {   color: red;  }    tr:nth-child(odd) {   background-color: #A2DED0;  }    tr:nth-child(even) {   background-color: #C8F7C5;  }  
Скриншот: применение псевдоклассов :first-child, :last-child и :nth-child
Скриншот: применение :first-child, :last-child и :nth-child

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег <div>
является родителем для тегов <p>, <table>. Разберем CSS по порядку.

Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега <div> добавить еще какой-нибудь тег (к примеру, <h2>), то стиль p:first-child уже не будет отображаться, поскольку <p> перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2.

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу <p> лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после <p> любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега <p> (об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

  <!-- HTML -->  <div>  <h2>Первый ребенок</h2>  <p>Второй ребенок</p>  <p>Третий ребенок</p>  <h3>Четвертый ребенок</h3>  <p>Пятый ребенок</p>  <h4>Последний ребенок</h4>  </div>  

Стиль CSS:

  /* CSS */  p:first-of-type {   color: violet;   text-transform: uppercase;  }    p:last-of-type {   font-style: italic;   font-size: 0.8em;  }    p:nth-of-type(3) {   color: red;  }    p:nth-of-type(odd) {   background-color: #A2DED0;  }    p:nth-of-type(even) {   background-color: #C8F7C5;  }    h3:only-of-type {   text-decoration: underline;  }  
Скриншот: применение псевдоклассов :first-of-type, :last-of-type, :nth-of-type и :only-of-type
Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type. Что оно делает? Оно выбирает дочерний элемент типа p, который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type.

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p. Как видно из HTML-кода, после последнего тега <p> есть еще и тег <h4>, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу <p>, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу <p>, который по факту является пятым ребенком тега <div>. Но если не брать во внимание элементы других типов, то получается, что тег <p> с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p, то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега <h3>, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег <h3> является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег <h3>, стиль не будет применён.

Выводы

Следующая часть этой главы – о смежных и родственных селекторах.

idg.net.ua

Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂

У нас есть меню

<div class="top-line"> 		<div class="menu"> 			<ul> 				<li><a href="#">Вызов курьера</a></li> 				<li><a href="#">Сотрудничество</a></li> 				<li><a href="#">Новости</a></li> 				<li><a href="#">Статьи</a></li> 				<li><a href="#">Видеоблог</a></li> 			</ul> 		</div> 	</div>

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

.top-line .menu ul li { 	float: left; 	padding: 6px 0px; }  .top-line .menu ul li a { 	color: #474747; 	font-size: 0.857em; 	text-decoration: none; 	padding: 7px 15px; 	border-left: 1px solid #fff; 	border-right: 1px solid #c7c7c7; }  .top-line .menu ul li a:first-child { border-left: none; } .top-line .menu ul li a:last-child { border-right: none; }

Потом начал отменять бордеры у первого и последнего элемента

.top-line .menu ul li a:first-child { border-left: none; } .top-line .menu ul li a:last-child { border-right: none; }

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

На утро дошло 😀

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

И все заработало 🙂

Полный правильный код ниже:

<div class="top-line"> 		<div class="menu"> 			<ul> 				<li><a href="#">Вызов курьера</a></li> 				<li><a href="#">Сотрудничество</a></li> 				<li><a href="#">Новости</a></li> 				<li><a href="#">Статьи</a></li> 				<li><a href="#">Видеоблог</a></li> 			</ul> 		</div> 	</div>
.top-line .menu ul li { 	float: left; 	padding: 6px 0px; 	border-left: 1px solid #fff; 	border-right: 1px solid #c7c7c7; }  .top-line .menu ul li a { 	color: #474747; 	font-size: 0.857em; 	text-decoration: none; 	padding: 7px 15px; }  .top-line .menu ul li:first-child { border-left: none; } .top-line .menu ul li:last-child { border-right: none; }

toster.ru

Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и .class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.

#id

(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между .class и #id — а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что — Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.

*

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

(Пр. *)  {   background-color:yellow;  })  

element

(Пр. p ) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target="_blank"

[attribute~=value]

(Пр. [title~=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без "<>".

Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.

Так же их называют Псевдокласы:

:link

(Пр. a:link) Объединяет все ссылки, которые еще не посещались

:visited

(Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить

:active

(Пр. a:active) Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:hover

(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль

:focus

(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем

:first-letter

(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента

:first-line

(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются

:first-child

(Пр. p:first-child) Что бы просто объяснить — применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:

:before

(Пр. p:before)

:after

(Пр. p:after)
Они применяются в тех случаях, когда — нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

element1~element2

(Пр. p~ul)

p~ul  {  background:red;  }  

Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.

<div>A div element.</div>    <ul>  <li>Item </li>  <li> Item </li>  <li> Item </li> </ul>    

— в этом случае ничего не произойдет, а в

<p>Another</p>  <ul>  <li>Item </li>  <li> Item </li>  <li> Item </li> </ul>  

а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

<html> <head> <style>  [class^="test"] { background:#ffff00; } </style> </head> <body>  <div class="first_test">item1</div> <div class="second"> item2</div> <div class="test"> item3</div> <p class="test"> item4</p>  </body> </html> 

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=".pdf"]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:

<html> <head> <style>  div[class$="test"] { background:red; } </style> </head> <body> <div class="first_test"> Item1</div> <div class="second"> Item2</div> <div class="test"> Item3</div> <p class="test"> Item4 </p> </body> </html> 

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

<html> <head> <style>  div[class*="test"] { background:red; } </style> </head> <body> <div class="first_test">item1</div> <div class="second"> item2</div> <div class="test"> item3</div> <p class="test"> item4</div> </body> </html> 

В этом примере результатом будут закрашенные строки item1, item3, item4.

Дальше перейдем к псевдоклассам

:first-of-type

(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

:last-of-type

(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

:only-of-type

(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

(Пр. p:nth-child(2)) Для каждого

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

:nth-last-child(n)

(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.

:nth-of-type(n)

(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.

:nth-last-of-type(n)

(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

:root

(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря — .

:empty

(Пр. p:empty) Определяет пустые элементы — без каких-либо дочерних элементов, текста или пробелов.

:target

(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id — #news element. Используется для URL.

:enabled

(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным — disabled) элементам форм, простите за тавтологию.

:disabled

(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.

:checked

(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Ура. На этом данный топик исчерпан, все денные подготовлены на основе личного опыта и конечно же официальных документаций. Статья подготовлена за 2 дня. Будут вопросы – задавайте.

habr.com


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector