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> </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.