Як вибрати елемент, який має певний клас?

Я розумію, що використання element.classмає дозволяти певному елементу, призначеному класу, отримувати інший "стиль", ніж решта класу. Це не питання про те, чи слід цим користуватися чи ні, але я намагаюся зрозуміти, як цей селектор призначений для роботи. Переглядаючи безліч прикладів в Інтернеті, я вважаю, що синтаксис правильний і не розумію, чому це не працює.

Ось приклад:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Це має бути так:

h2.myClassшукає h2 з класом myClass. Але ви насправді хочете застосувати стиль для h2 всередині, .myClassщоб ви могли використовувати селектор нащадків .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

Це посилання дасть вам базове уявлення про селектори та подивиться на селектори-нащадки

h2.myClassвідноситься до всіх h2с class="myClass".

.myClass h2відноситься до всіх, h2які є дочірніми елементами (тобто вкладеними в них) class="myClass".

Якщо ви хочете, щоб h2ваш HTML-код виглядав синім, змініть CSS на такий:

.myClass h2 {
    color: blue;
}

Якщо ви хочете мати можливість посилатися на це h2за допомогою класу, а не його тегу, вам слід залишити CSS таким, який він є, і вказати h2клас у HTML:

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

Селектор element.class призначений для стилізації таких ситуацій, як:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Розміру шрифту та вазі шрифту буде присвоєно як вашому інтервалу, так і p з .large, а синій колір - лише p.

Як зазначали інші, ви працюєте з селекторами нащадків.

h2.myClassдійсний лише для h2елементів, яким клас myClassпризначений безпосередньо.

Ви хочете зазначити це так:

.myClass h2

Який вибирає всіх дочірніх елементів, myClassякі мають тегиh2

:first-childСелектор CSS дозволяє націлити на елемент, який є першим дочірнім елементом у своєму батьківському.

element:first-child { style_properties }
table:first-child { style_properties }