Суббота, 01 Сентября 2012 11:56

Псевдокласс :only-child

Written by 
Оцени эту запись
(1 Голос)

В СSS, начиная с CSS3, появился отличный псевдокласс :only-child, который дает возможность обратиться в дочернему элементу только в том случае, если он у родителя единственный.

 

Например, есть у нас три списка, у которых разное количество элементов.

 

<ul>

         <li>Пункт 1</li>

         <li>Пункт 2</li>

         <li>Пункт 3</li>

         <li>Пункт 4</li>

</ul>

<ul>

         <li>Пункт 1</li>

</ul>

 

<ul>

         <li>Пункт 1</li>

         <li>Пункт 2</li>

         <li>Пункт 3</li>

</ul>

 

При помощи :only-child можно задать стили только тому <li>, который в списке единственный:

 

ul.only_child li:only-child {text-transform: uppercase; color: blue; font-weight: bold}

 

 Результат:

 

 

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 1
  • Пункт 1
  • Пункт 2
  • Пункт 3

 

Аналогичного эффекта можно также добиться используя сочетание псевдоклассов :first-child:last-child (одновременно первый и последний) или  :nth-child(1):nth-last-child(1) (первый с начала и с конца).

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов