Псевдокласс first-child в CSS

Псевдокласс first-child

Бывают случаи как например на одном из сайтов по продаже оригинально обуви UGG Australia моего клиента нам нужно подкрасить средствами CSS одно меню сайта.
Для этого мы используем псевдокласс first-child

Есть два варианта для этого псевдокласса

  1.  это выделение первого элемента  first-child 
    .menu_links a:first-child {
    padding: 0 15px;
    }
    как мы понимаем first он относится к первому элементу
  2. выделение последнего элемента last-child
    .menu_links a:last-child {
    border: none;
    box-shadow: none;
    color: red;
    font-weight: 900;
    }

Но если Вам нужно допустим подкрасить элементы меню второй и более, то используем след вариант

.menu_links:first-child a:nth-child(3) {
color: red;
}

Как и говорил ранее все это делалось на сайте моего клиента https://www.ruggis.ru/

 

Как вариант даю ссылку с визуальным редактором где можно все наглядно посмотреть: https://codepen.io/anon/pen/QEoQZA

Понравилась статья? Поделиться с друзьями:
Блог ITишника и просто человека
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: