#css #selector
Вопрос:
Как я могу указать :first-of-type весь документ целиком?
Я хочу оформить первый <p> из HTML, независимо от того, где он находится (я не хочу писать section p:first-of-type , потому что он может быть расположен в другом месте в другом HTML-документе).
p {
background:red;
}
p:first-of-type {
background:pink;
}
p:last-of-type {
background:yellow;
} <body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body> Комментарии:
1. Не могли бы вы просто дать первому классу класс и назначить ему css?
2. Я боюсь, что этого невозможно достичь с помощью чистого CSS. Вам придется испачкать руки JavaScript 🙂
3. не могли бы вы перефразировать свой вопрос?.. Я не уверен, что правильно понимаю … в приведенном вами примере, какого порядка цветов вы пытаетесь достичь?
4. Вы ищете селектор
*?5. @henser Вопрос достаточно ясен, ОП хочет нацелиться на первый элемент абзаца независимо от того, где он находится в документе.
Ответ №1:
Только с помощью CSS это, к сожалению, невозможно. Документация для :first-of-type псевдокласса гласит:
:first-of-typeПсевдокласс представляет элемент, который является первым родственным элементом своего типа в списке дочерних элементов родительского элемента.
Это означает, что :first-of-type применяется к первому элементу его типа относительно его родительского элемента, а не к корню документа (или body элементу, в данном случае).
Решения на языке JavaScript
:first-of-type
Мы можем достичь этого, введя некоторые JavaScript. Все, что нам для этого нужно, — это querySelector() метод JavaScript, который извлекает первый соответствующий элемент из указанного селектора.
В этом примере я изменил ваш :first-of-type псевдокласс, чтобы вместо этого он был классом «первого типа», а затем использовал JavaScript, чтобы добавить этот класс в элемент, возвращаемый при использовании querySelector('p') :
document.querySelector('p').className = ' first-of-type'; p {
background:red;
}
p.first-of-type {
background: pink;
} <body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body> :nth-child и :last-of-type
Что касается :nth-child и :last-of-type , мы можем вместо этого использовать аналогичный метод, который дает нам JavaScript: querySelectorAll() . Этот метод собирает все совпадающие элементы в список узлов (который похож на массив), который мы затем можем просмотреть или выбрать определенные элементы изнутри с помощью индекса:
var elems = document.querySelectorAll('p');
// nth-of-type = NodeList[n - 1]
// e.g. to select the 3rd p element ("333"):
if (elems.length >= 2)
elems[2].className = ' nth-of-type';
// last-of-type = NodeList length - 1
if (elems.length)
elems[elems.length - 1].className = ' last-of-type'; p {
background:red;
}
p.nth-of-type {
background: pink;
}
p.last-of-type {
background: yellow;
} <body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body> Обратите внимание, что я включил if операторы вокруг обоих селекторов, чтобы убедиться, что в списке узлов элементов достаточно элементов, иначе будет выдана ошибка.
Комментарии:
1. Для самого быстрого решения я бы тоже предпочел js, не тратьте время на поиск, используйте вместо этого js
2. Чтобы получить n-й соответствующий элемент, просто проиндексируйте его с помощью querySelectorAll:
var elements = document.querySelectorAll('p'); elements[elements.length - 1].className = ' last';3. @BoltClock, кажется, я совершенно забыл ответить на эту часть вопроса! Я обновлю свой ответ.
4. Есть ли вероятность, что эта функция будет добавлена в спецификацию CSS4?
5. @Vandervals основываясь на текущем состоянии рабочего проекта селекторов уровня 4 , это не похоже на то, что, к сожалению, будет добавлено.