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


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 { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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>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 в таблице

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

Категория: 

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.