Каскад и наследование - изучение веб-разработки

Наследование

Для сокращения количества правил в CSS имеется механизм наследования.

Для примера, рассмотрим правило:

body {
color: blue;
}

1
2
3

body {

color blue;

}

В примере выше, мы устанавливаем синий цвет текст для тега
<body> . При этом все остальные элементы, находящиеся внутри этого тега, независимо от уровня вложенности, унаследуют синий цвет текста.

Описанное выше поведение очень удобно, иначе вам бы пришлось, для всех элементов, прописывать цвет текста вручную.

Наследуются далеко не все свойства. Свойства, относящиеся к тексту, наследуются – это такие свойства, как:
color,font,letter-spacing,line-height,list-style,text-align,text-indent,text-transform,visibility,white-spaceиword-spacing и некоторые другие.

А вот свойства, которые отвечают за форматирование блоков не наследуются:
background,border,display,floatиclear,height,width,margin,overflow,padding,position,text-decoration,vertical-align,z-index и другие.

В самом деле, представьте если бы наследовалась, скажем, граница – верстка бы сильно усложнилась.

В спецификации css имеется ключевое слово
inherit . С его помощью можно принудительно наследовать любое свойство от родительского блока (как наследуемое, так и не наследуемое).

.sidebar p {
overflow: inherit;
}

1
2
3

.sidebar p {

overflow inherit;

}

В этом примере параграфы, находящиеся внутри блока с классом
.sidebar будут наследовать значение свойства
overflow от своего контейнера.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Синтаксис: имяТега

Пример задания правила для всех элементов на странице:

/* селектор p выберет все элементы p на странице */
p {
  padding-bottom: 15px;
}

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута ).

Синтаксис: .имяКласса

Пример задания правила для всех элементов, имеющих класс :

/* селектор .center выберет все элементы, имеющие класс center */
.center {
  text-align: center;
}

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута ).

Синтаксис: #имяИдентификатора

Пример задания правила для элемента, имеющего в качестве значения атрибута значение footer:

/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
  height: 50px;
  margin-top: 20px;
}

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Синтаксис: *

Пример задания правила для всех элементов на странице:

/* селектор * выберет все элементы на странице */
* {
  margin: 0;
  padding: 0;
}

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

– по имени атрибута;
– по имени и значению атрибута;
– по имени и значению, с которого оно должно начинаться;
– по имени атрибута и его значению, которое равно или начинается со ;
– по имени атрибута и значению, на которое оно должно заканчиваться;
– по указанному атрибуту и значению, которое должно содержать ;
– по имени атрибута и значению, которое содержит отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут :

/* селектор  выберет все элементы на странице, имеющих атрибут target */
 {
  background-color: red;
}

Пример задания правила для всех элементов на странице, имеющих атрибут со значением :

/* селектор  выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
 {
  background-color: green;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого начинается с :

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
 {
  background-color: yellow;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого равно или начинается с (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
 {
  background-color: orange;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого заканчивается на :

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
 {
  background-color: yellow;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого содержит подстроку (например будет выбран элемент, если атрибут у него равен ):

/* селектор  выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
 {
  background-color: green;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого содержит , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут равен ):

/* селектор  выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
 {
  background-color: brown;
}

Как скрыть HTML элемент при помощи jQuery

Для начала рассмотрим пару примеров, как мы можем скрыть элемент со страницы при помощи обычного CSS:

.my-selector {
opacity: 0;
height: 0;
display: none;
text-indent: -9999px;
}

opacity — отвечает за прозрачность, height — за высоту нашего контейнера, display — за отображение, text-indent — обычно влияет только на отступ текста (в очень редких случаях такой вариант тоже можно применять). Не будем писать про извращения c position: absolute

В jquery чаще всего используют связки:

<script>
$('.mySelector').hide(); // скрыть селектор
$('.mySelector').show(); // показать 
</script>

Кроме этого, иногда целесообразней использовать переключатели (toggle). Просто скрыв элемент, вы не убираете его из кода — это полезно когда в ваших скриптах он может позже появиться (на например это меню аккордеон — если вы удалите код со страницы нечего будет показывать). Для удаления селектора со страницы используется remove()

<script>
$('.mySelector').remove();
</script>

И хотя это не самый лучший вариант, ведь ваша страница сначала прогружается, а только потом скрипт ищет элемент и удаляет его. Будет гораздо лучше, если вы найдете файл, с помощью которого выводится тот или иной кусок кода, например на странице index.html или index.php — но если вы работаете с CMS, то не стоит рассчитывать что все будет так просто

Дивы контейнеров

Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div class='page'>  <!-- Добавьте это -->
<h1> Селекторы CSS</h1>
    <p  class='synopsis'>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства

Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.

Комбинации селекторов.

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

В задачу, описанную выше, мы можем решить, написав два правила.

Для заголовков статей:

.articles h3 {
text-align: center;
}

1
2
3

.articles h3 {

text-align center;

}

Для заголовков новостей:

.sidebar h3 {
color: darkred;
}

1
2
3

.sidebar h3 {

color darkred;

}

Здесь мы использовали комбинатор
пробел . Т.е. селектор
.articles h3 выберет для изменений теги
<h3> , которые находятся внутри элемента с классом
articles (вне зависимости от уровня вложенности).

Этот комбинатор называется «комбинатор потомков» и используется очень часто.

Дочерний селектор

Давайте немного изменим верстку блока со статьями.

<div class=»articles»>
<h3>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1
2
3
4
5
6
7
8
9

<h3>Заголовок статьи 1</h3>

<h3>Заголовок статьи 2</h3>

<h3>Рекламная акция</h3>

</div>

<h3>Заголовок статьи 3</h3>

<h3>Заголовок статьи 4</h3>

</div>

У нас, среди статей, появился рекламный блок, и в нем также используется заголовок
<h3> .

Использованный нами ранее селектор
.articles h3 подействует и на заголовок рекламной акции, поскольку он не учитывает уровень вложенности.

Если мы хотим изменить только заголовки статей, не трогая рекламный заголовок, то лучше использовать «дочерний селектор» — символ
> .

.articles > h3 {
text-align: center;
}

1
2
3

.articles > h3 {

text-align center;

}

Селектор
.articles>h3 выберет для изменения теги h3, которые находятся непосредственно в элементе с классом
articles , а теги рекламных заголовков затронуты не будут.

Комбинатор всех соседних элементов

Комбинатор
~ выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.

<div class=»articles»>
<h3 class=»first-article»>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1
2
3
4
5
6
7
8
9

<h3 class=»first-article»>Заголовок статьи 1</h3>

<h3>Заголовок статьи 2</h3>

<h3>Рекламная акция</h3>

</div>

<h3>Заголовок статьи 3</h3>

<h3>Заголовок статьи 4</h3>

</div>

.first-article ~ h3 {
color: blue;
}

1
2
3

.first-article~h3{

colorblue;

}

В примере выше все заголовки <h3>, которые находятся после заголовка с классом
.first-article , станут синего цвета. Заголовок, находящийся внутри <div> с классом
.promo затронут не будет, поскольку у него другой контейнер.

Комбинатор следующего соседнего элемента

Комбинатор
+ позволяет выбрать элемент, который находится сразу после указанного элемента. При этом, конечно, у них должен быть общий контейнер.

.first-article + * {
margin-top: 3rem;
}

1
2
3

.first-article + * {

margin-top 3rem;

}

В примере выше, написано правило, которое обеспечивает, что любой (один) элемент, который находятся сразу после заголовка с классом
.first-article , будет иметь отступ сверху размером
3rem .

Комбинатор запятая

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

h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}

1
2
3

h1, h2, h3, h4, h5, h6 {

margin-bottom;

}

В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.

Виды и приоритет стилей CSS

В случае равенства специфичности селекторов сравниваемых правил, приоритет будет определяться по виду стиля,
расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Перечислим
основные виды стилей в порядке возрастания их приоритета.

Стиль браузера обладает наиболее низким приоритетом и применяется по
умолчанию к элементам html-кода, к которым не применяется другое форматирование, говоря проще – к
«голому» html-коду.
Стиль пользователя устанавливается в настройках браузера пользователем и
по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по
умолчанию станет применяться стиль пользователя.
Стиль автора устанавливается автором страницы (программистом) и обладает
еще большим приоритетом. Именно он нас и будет больше всего интересовать.

Авторский стиль представляет собой результирующий стиль, который формируется из различных видов составляющих его отдельных стилей, опять же,
на основе каскадирования. Перечислим их в порядке возрастания приоритета в случае применения к одному и тому же элементу при условии равенства
специфичности селекторов.

Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей
ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше).
Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента
«link» ниже в коде этого документа. Соответственно, если таблица подключена в коде
документа выше, то приоритет ее стилей будет ниже.
Стили внутренних таблиц (расположены внутри контейнеров
«style») имеют приоритет перед стилями внешних таблиц, но только если они
расположены в коде ниже, чем элемент «link», при помощи которого была подключена
внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые
встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько
элементов «style», то большим приоритетом обладают стили тех таблиц, которые
расположены в коде документа ниже.
Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью
селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Предотвращение наследования

Когда переменные CSS используются для хранения данных, их поведение по умолчанию — наследование — желательно. Определяем переменные в корневом элементе и можем переопределять их в поддереве. Но наследование часто мешает. Рассмотрим следующий пример, в котором используется переменная для применения тонкого свечения с предопределенным цветом, смещением и радиусом размытия, но с переменным разбросом:

See this code Cancelling inheritance on x.xhtml.ru.

Это приводит к тому, что тонкое свечение применяется не только к элементу , но и к любому из его дочерних элементов, включая ссылки , выделение и т.д.

Чтобы это исправить, нужно отключить наследование, добавив к первому правилу. Поскольку прямое приложение всегда имеет приоритет над унаследованными правилами, оно переопределит унаследованные значения, но из-за низкой специфичности оно уступит место всему, что указано в элементе.

Циклы делают переменные CSS недействительными во время вычисления значения

Рассмотрим следующий фрагмент Sass:

Результат будет примерно таким:

CSS-переменные — это совсем другая история, естественное следствие их реактивности. Посмотрим на тот же фрагмент, но с CSS-переменными:

Переменная, зависящая от самой себя, создала бы бесконечный цикл, которого не должно быть в декларативном языке, таком как CSS. Чтобы избежать этого, циклы делают все задействованные переменные недействительными во время вычисления значения. Сюда входят циклы длины 1 (в примере выше) и более длинные циклические цепочки, где переменная A зависит от B, которая зависит от C, и так далее до Z, которая зависит от A. Все 26 (A..Z) были бы недействительными во время вычисления значения, что сделало бы их значение равным начальному, и это по существу дало бы такой же результат, как если бы они никогда не были установлены.

Фрагменты URL-адресов

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

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

Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.

Один или несколько классов в CSS?

В большинстве случаев вы присваиваете элементу один атрибут класса , но на самом деле вы не ограничены только одним классом, каким вы являетесь с идентификаторами. В то время как элемент может иметь только один атрибут ID, вы можете назначить элементу несколько классов, а в некоторых случаях это сделает вашу страницу более простой в оформлении и намного более гибкой.

Если вам нужно назначить несколько классов элементу, добавьте дополнительные классы и просто разделите их пробелом в вашем атрибуте.

Например, этот параграф имеет три класса:

Это устанавливает следующие три класса для тега абзаца:

Pullquote
Рекомендуемые
Оставили

Обратите внимание на пробелы между каждым из этих значений класса. Именно эти пространства определяют их как отдельные, отдельные классы

По этой же причине в именах классов не должно быть пробелов, поскольку при этом они устанавливаются как отдельные классы.

Когда у вас есть значения классов в HTML , вы можете назначить их как классы в вашем CSS и применить стили, которые вы хотите добавить. Например.

В этих примерах пары объявлений и значений CSS появляются внутри фигурных скобок, как эти стили будут применяться к соответствующему селектору.

Если вы устанавливаете класс для определенного элемента (например, p.left ), вы все равно можете использовать его как часть списка классов; однако следует помнить, что это повлияет только на те элементы, которые указаны в CSS. Другими словами, стиль p.left будет применяться только к абзацам с этим классом, поскольку ваш селектор на самом деле говорит применить его к «абзацам со значением класса left ». Напротив, два других селектора в примере не указывают определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

Например:

/* Shaking animation for error alerts */

@keyframes spaceboots {
  0% {
    transform: translate(2px, 1px) rotate(0);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0) rotate(1deg);
  }
  30% {
    transform: translate(0, 2px) rotate(0);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0);
  }
  70% {
    transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 2px) rotate(0);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

Согласитесь, небольшой комментарий способен сильно изменить картину в лучшую сторону: без него можно было бы долго гадать, что делает эта анимация и где она применяется.

Псевдоклассы для структуры

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Селектор потомков

Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h1 em {
  /* определенные стили */
}

Каскадность и специфичность

Напомню, что CSS в переводе – это «Каскадные таблицы стилей», уже одно это показывает важность понятия «каскадность». В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил

И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность

В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил. И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность.

Каскадность

Посмотрите на пример:

<h3 class=»attention highlight»>Заголовок третьего уровня</h3>

1	<h3 class=»attention highlight»>Заголовок третьего уровня</h3>

h3 {
font-size: 24px;
}
.attention {
color: red;
}
.highlight {
background-color: yellow;
}

1
2
3
4
5
6
7
8
9

h3 {

font-size 24px;

}

.attention {

color red;

}

.highlight {

background-color yellow;

}

Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:

{
font-size: 24px;
color: red;
background-color: yellow;
}

1
2
3
4
5

{

font-size24px;

colorred;

background-coloryellow;

}

С каскадностью теснейшим образом связана специфичность.

Дело в том, что одни и те же свойства, для одного и того же элемента, могут быть определены в разных css-правилах, и даже, в разных файлах.

Какое же значение у свойства будет в итоге? Это определяется через механизм, называемый специфичность.

Специфичность

Посмотрим пример:

<div class=»sidebar»>
<h3>Заголовок новости</h3>
</div>

1
2
3

<h3>Заголовок новости</h3>

</div>

.sidebar h3 {
color: red;
}
h3 {
color: blue;
}

1
2
3
4
5
6

.sidebar h3 {

color red;

}

h3 {

color blue;

}

В примере цвет текста для тега
<h3> , находящегося в контейнере с классом
.sidebar , прописан 2 раза.

Вопрос: «Какой цвет будет у этого элемента?»

Ответ: «Красный, поскольку селектор
.sidebar h3 более специфичен, еще говорят: селектор имеет больший вес».

Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.

Тысяча – это встроенные стили, добавляемые непосредственно в сам элемент в HTML-разметке.
Сотня – это идентификатор.
Десятки – это классы.
Единицы – это сам элемент или псевдоэлемент.

Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:

Селектор	Тысячи	Сотни	Десятки	Единицы	Специфичность
div	1	0001
.some-class	1	0010
#myid	1	0100
<p style=»color: red»>текст</p>	1	1000
.some-class div	1	1	0011
#myid .some-class div	1	1	1	0111
.some-class ul li	1	2	0012
.some-class .my-class p span	2	2	0022

В ситуации, если специфичность у селекторов одинакова, действовать будет правило, которое находится ниже в css-файле.

Если правила находятся в разных css-файлах, то действовать будет правило, которое расположено в файле, подключенном позднее (ниже).

Стили кнопок

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы

Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active:

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Как скрыть элемент использую присвоение классов в jQuery

Один из самых «нормальных» вариантов это присваивать временные классы. Кстати говоря, такие классы лучше выделить как-то на фоне остальных, например, мне понравилась идея добавлять приставку .js- как по мне, очень удобно.

В самом начале статьи уже рассматривались варианты скрытия на CSS, самый адекватный это:

.js-hidden {
  display: none;
}

и как всегда вся магия jQuery умещается в несколько строк:

$(function(){
  $('.my-selector').click(function(){
    $(this).addClass('js-hidden');
    $(this).removeClass('js-hidden');
    $(this).toggleClass('js-hidden');
  });
});

$(this).addClass(‘js-hidden’); — добавляем класс тому объекту, по которому мы кликнули,$(this).removeClass(‘js-hidden’); — убираем класс по клику,$(this).toggleClass(‘js-hidden’); — автоматом убираем или добавляем класс, по очереди.

Обратите внимание, что если вы хотите закрыть «попап» или другой элемент на странице, вам нужно заменить $(this) на свой селектор $(‘.mySelector’), и не забывайте, одну очень важную вещь — прятать нужно не все элементы на странице, а только тот, который относится к текущей кнопке. Да, это означает что вам придется искать родителя, начиная от элемента по которому вы кликнули

Надеюсь, вы сами разберетесь какие из этих советов можно считать «вредными», а какие можно смело применять

Когда используется class, а когда id?

ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.

Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.

Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:

<p class="content">Этот пункт не имеет границ.</p>
<p class="content bordered">Этот пункт имеет границы.</p>

Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:

.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }

Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода. Пожалуйста, оставьте свои мнения по текущей теме статьи

Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!

Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!

Валентин Сейидовавтор-переводчик статьи «CSS Class vs ID: Which One to Use»

Наследование

Базовые селекторы

Селектор по элементу (тегу)

Селектор по классу

Селектор по идентификатору (id)

Универсальный селектор

CSS селекторы по атрибуту

Как скрыть HTML элемент при помощи jQuery

Дивы контейнеров

Комбинации селекторов.

Дочерний селектор

Комбинатор всех соседних элементов

Комбинатор следующего соседнего элемента

Комбинатор запятая

Виды и приоритет стилей CSS

Предотвращение наследования

Рекомендации и оптимизация JavaScript

Циклы делают переменные CSS недействительными во время вычисления значения

Фрагменты URL-адресов

Один или несколько классов в CSS?

Комментирование кода

Псевдоклассы для структуры

Селектор потомков

Каскадность и специфичность

Каскадность

Специфичность

Стили кнопок

Как скрыть элемент использую присвоение классов в jQuery

Когда используется class, а когда id?