Как выбрать элемент с определенным классом?

81

Я понимаю, что использование 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>

— Кэролайн
источник

4

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

— Gabriel

105

Должно быть так:

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

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

Эта ссылка даст вам общее представление о селекторах и взглянет на селекторы потомков.

— PSL
источник

Для ясности я пытаюсь понять, как работает селектор element.class. Я специально пытаюсь использовать синтаксис element.class, чтобы переопределить цвет элемента (h2, который находится в myClass) на синий, а не на зеленый цвет класса. Я хотел бы знать, как настроить таргетинг на конкретный элемент в классе.

— Кэролайн

@Carolyn, если вы этого хотите, вам нужно использовать myClass на h2. Как это jsfiddle.net/wDmwE . Причина в том, что правило css на h2 переопределит класс .myClass в контейнере.

— PSL

1

Потрясающе! Да, ваш ответ помог. Думаю, моя проблема была в специфичности (я только узнаю об этом). Еще раз спасибо!. Очень признателен.

— Кэролайн

1

В заключение. Долго искал это решение. Я знал об elementWithAClass.Class {}, но не о .Class elementInsideThisClass {}. Спасибо. Я должен тебе пива: D

— kv1dr 04

58

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. Я хочу, чтобы все элементы h2 в "myClass"

— Кэролайн

@Carolyn, помогает ли мой обновленный ответ? Если нет, то я не понимаю, о чем вы спрашиваете.

— КМЗ 05

Да спасибо!! Я все еще пытаюсь понять специфику.

— Кэролайн

@Carolyn есть что-то особенное, с чем у вас проблемы?

— ASGM 05

ASGM - у меня возникли проблемы с пониманием того, как работает селектор element.class. С тех пор, как я опубликовал, я узнал немного больше (наряду с информацией, представленной на этом сайте), поэтому я использовал их неправильно. Спасибо,

— Кэролайн

12

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

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

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

p.large {
    color:blue;
}

И вашему span, и p будут назначены размер шрифта и font-weight из .large, но синий цвет будет назначен только p.

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

— Эндрю Клоди
источник

Спасибо. Очень много. Все мне очень помогли.

— Кэролайн

2

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

Вы хотите отметить это так:

.myClass h2

Которая выбирает все дочерние элементы, у myClassкоторых есть тэгh2

— RienNeVaPlu͢s
источник

1

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

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

— Sreekumar P
источник