First type of css: :first-of-type — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

Псевдокласс :first-of-type | WebReference

Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :first-of-type без указания селектора выберет первые элементы каждого типа (<h2>, <p>, <address>, <time>) и установит для них красный цвет текста.

article :first-of-type { color: red; }

При добавлении селектора к :first-of-type сперва выбираются указанные элементы, затем из них берётся первый элемент. Наличие других элементов (<h2> и <address>) и их порядок не учитываются.

article p:first-of-type { color: red; }

Здесь будет выбран первый абзац внутри <article> и выделен красным цветом.

Вместо :first-of-type допустимо использовать :nth-of-type(1).

Синтаксис

Селектор:first-of-type  {  ...  }

Пример

<!DOCTYPE html> <head> <meta charset=»utf-8″> <title>first-of-type</title> <style> table { border-collapse: collapse; /* Убираем двойные границы */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 1px solid #6A3E14; /* Параметры рамки */ padding: 4px; /* Поля в ячейках */ } tr:first-of-type { background: #808990; /* Цвет фона */ color: #fff; /* Цвет текст */ } td:first-of-type { background: #CFD6D3; /* Цвет фона */ } </style> </head> <body> <table> <tr> <td> </td><td>1998</td><td>1999</td><td>2000</td><td>2001</td> <td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td> <td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td> <td>4</td><td>13</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td> <td>4</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

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

Рис. 1. Результат использования псевдокласса :first-of-type в таблице

Спецификация

Спецификация	Статус
Selectors Level 4	Рабочий проект
Selectors Level 3	Рекомендация

Браузеры


9	12	1	9.5	3.2	3.5


2.1	1	10	3.2

Псевдоклассы

См. также

:first-child и :last-child
:first-of-type и :last-of-type
:nth-last-child() и :nth-last-of-type()
Псевдокласс :first-child
Псевдокласс :last-child
Псевдокласс :last-of-type

first-of-type ᐈ Довідник CSS ➜ HTML-CSS.CO.UA

Довідник CSS атрибутів23 сiчня 2020 р.583

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9. 0 +	1.0 +	9.5 +	3.1 +	3.5 +	2.1 +	2.0 +

Коротка інформація

Застосовується	До всіх елементів
Посилання на специфікацію	http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

опис

Псевдоклас : first-of-type задає правила стилів для першого елемента в списку дочірніх елементів свого батька. Наприклад, додавання : first-of-type до селектора TD встановлює стиль для всіх перших осередків, оскільки батьком для тега <td> виступає тег <tr> .

Синтаксис

елемент: first-of-type {…}

Значення

Ні.

Приклад

HTML5 CSS3 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>
 first-of-type </title>
 <style>
 table {border-collapse: collapse; /* Прибираємо подвійні межі */ width: 100%; /* Ширина таблиці */ border-spacing: 0; /* Відстань між осередків */ } td {border: 1px solid #6A3E14; /* Параметри рамки */ padding: 4px; /* Поля в осередках */ } tr: first-of-type {background: #808990; /* Колір фону */ color: #fff; /* Колір текст */ } td: first-of-type {background: #CFD6D3; /* Колір фону */ } </style>
 </head>
 <body>
 <table>
 <tr>
 <td>
 &nbsp; </td>
 <td>
 тисяча дев'ятсот дев'яносто вісім </td>
 <td>
 1999 </td>
 <td>
 2000 </td>
 <td>
 2001 </td>
 <td>
 2002 </td>
 <td>
 2003 </td>
 </tr>
 <tr>
 <td>
 Нафта </td>
 <td>
 3 </td>
 <td>
 22 </td>
 <td>
 34 </td>
 <td>
 62 </td>
 <td>
 74 </td>
 <td>
 57 </td>
 </tr>
 <tr>
 <td>
 Золото </td>
 <td>
 4 </td>
 <td>
 13 </td>
 <td>
 69 </td>
 <td>
 72 </td>
 <td>
 56 </td>
 <td>
 47 </td>
 </tr>
 <tr>
 <td>
 Дерево </td>
 <td>
 4 </td>
 <td>
 7 </td>
 <td>
 73 </td>
 <td>
 79 </td>
 <td>
 34 </td>
 <td>
 86 </td>
 </tr>
 </table>
 </body>
 </html>

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

Рис. 1. Результат використання псевдокласу: first-of-type в таблиці

Теги HTML5

Як заголовок зробити посиланням?

Please enable JavaScript to view the comments powered by Disqus.

css — селектор CSS3: первый тип с именем класса?

Можно ли использовать селектор CSS3 :first-of-type для выбора первого элемента с заданным именем класса? Я не прошел тест, так что я думаю, что это не так?

Код (http://jsfiddle.net/YWY4L/):

 p:first-of-type {цвет:синий}
p.myclass1: первый тип {цвет: красный}
.myclass2: первый тип {цвет: зеленый}

 
  Этот текст должен отображаться как обычно
  Этот текст должен быть синим.
  Этот текст должен быть красным.
  Этот текст должен быть зеленым.

css
css-селекторы

Нет, использовать только один селектор невозможно. Псевдокласс :first-of-type выбирает первый элемент своего типа ( div , p и т.д.). Использование селектора класса (или селектора типа) с этим псевдоклассом означает выбор элемента, если он имеет заданный класс (или имеет заданный тип) и , является первым элементом своего типа среди своих братьев и сестер.

К сожалению, в CSS нет селектора :first-of-class , который выбирает только первое вхождение класса. В качестве обходного пути вы можете использовать что-то вроде этого:

 .myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* по умолчанию или наследуется от родительского div */; }

Пояснения и иллюстрации обходного пути приведены здесь и здесь.

Проект селекторов CSS уровня 4 предлагает добавить грамматики в селекторе :nth-child . Это позволит вам выбрать n -го дочернего элемента, соответствующего данному другому селектору:

 :nth-child(1 of p. myclass)

В предыдущих черновиках использовался новый псевдокласс :nth-match() , поэтому вы можете видеть этот синтаксис в некоторых обсуждениях этой функции:

 :nth-match(1 of p.myclass)

Теперь это реализовано в WebKit и, таким образом, доступно в Safari, но, похоже, это единственный браузер, который его поддерживает. Есть заявки на реализацию Blink (Chrome), Gecko (Firefox) и запрос на реализацию в Edge, но явного прогресса ни по одному из них нет.

Это , а не возможно использовать селектор CSS3 :first-of-type для выбора первого элемента с заданным именем класса.

Однако, если у целевого элемента есть предыдущий одноуровневый элемент, вы можете комбинировать псевдокласс CSS отрицания и соседние одноуровневые селекторы, чтобы соответствовать элементу, который не имеет сразу предыдущего элемента с тем же именем класса:

: не (. мой класс1) + .мойкласс1

Пример полного рабочего кода:

 p:first-of-type {color:blue}
p: не (.myclass1) + .myclass1 {цвет: красный}
p:not(.myclass2) + .myclass2 { цвет: зеленый }

 
  Этот текст должен отображаться как обычно
  Этот текст должен быть синим.
  Этот текст должен быть красным.
  Этот текст должен быть зеленым.

Я нашел решение для вашей справки. из некоторых групповых разделов выберите из группы двух одинаковых разделов класса первый

 p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:последний тип {цвет:зеленый}

Кстати, я не знаю, почему :последний тип работает, а :первый тип не работает.

Мои эксперименты с jsfiddle… https://jsfiddle.net/aspanoz/m1sg4496/

Это старая тема, но я отвечаю, потому что она по-прежнему занимает верхние строчки в результатах поиска. Теперь, когда будущее наступило, вы можете использовать псевдоселектор :nth-child.

 p:nth-child(1) { цвет: синий; }
p.myclass1:nth-child(1) { цвет: красный; }
p.myclass2:nth-child(1) { цвет: зеленый; }

Псевдо-селектор :nth-child обладает мощными возможностями — в круглые скобки можно вводить не только числа, но и формулы.

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Вы можете сделать это, выбрав каждый элемент класса, который является братом того же класса, и инвертировав его, что выберет почти каждый элемент на странице, поэтому вам придется снова выбирать по классу.

например:

 <стиль>
    :не(.бар ~ .бар).бар {
        красный цвет;
    }
<дел>
    <дел>
     
    <дел>
    <дел>
    <дел>
    <дел>

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