Наследование классов в CSS — class, id, !importent

Разберём, как наследуются значения стилей для классов.

В CSS существует последовательность применения стилей для классов.

Например у нас есть следующая структура:

<div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Стили у elements например будут одни, где присутствует одинаковый белый фон.

.element{
    background: white;
}

1. Применение дополнительного класса для перезаписи стиля определённого блока

Если мы добавим например к последнему блоку <div class=»element»></div> дополнительный стиль element-two :

<div class="block"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element element-two"></div> 
</div>

И стиль для класса element-two  добавим другой цвет фона, например красный. У такого блока с дополнительным классом перезапишутся стили, поменяется фон блока на красный:

.element-two{
    background: red;
}

А другие стили, которые не будут изменены и добавлены к дополнительному классу,  будут наследоваться от класса element

2. Добавление id для перезаписи стиля дополнительного класса element-two

<div class="block" id="block"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element element-two"></div> 
</div>

При добавлении id к блоку в HTML и написании стиля для класса element-two с добавлением #block, те стили которые применялись ранее только для дополнительного стиля element-two перезапишутся за счёт айдишника:

#block .element-two{
    background: yellow;
}

2. Добавление !important к значению перезапишет стиль, делая его важным.

Important — переводится как важный и применив данное дополнение к значению, сделает значение ещё более приоритетным:

#block .element-two{
    background: yellow !important; 
}

Но применение !important не является хорошим тоном в среде веб-разработчиков, означает, что при написании кода, что-то было упущено, где-то был просчёт в иерархии при определении классов.

Данный метод не является ошибкой, просто не так круто выглядит в глазах опытных программистов!)

Адаптивная, SEO подготовленная WordPress тема
Артём/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

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