Jak wybrać element, który ma określoną klasę?

81

Rozumiem, że używanie element.classpowinno pozwolić, aby określony element przypisany do klasy otrzymał inny „styl” niż reszta klasy. Nie chodzi o to, czy należy tego używać, czy nie, ale raczej próbuję zrozumieć, jak ten selektor ma działać. Patrząc na mnóstwo przykładów w Internecie, uważam, że składnia jest poprawna i nie rozumiem, dlaczego to nie działa.

Oto przykład:

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>

— Carolyn
źródło

4

Może warto zaktualizować tytuł pytania, aby odzwierciedlić fakt, że pytasz, jak działają selektory element.class, a nie dlaczego nie działają tak, jak oczekujesz.

— Gabriel

105

Tak powinno być:

h2.myClassszuka h2 z klasą myClass. Ale tak naprawdę chcesz zastosować styl dla h2 wewnątrz, .myClasswięc możesz użyć selektora potomków .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Próbny

Ten odnośnik da Ci podstawowe pojęcie o selektorach i przyjrzy się selektorom potomnym

— PSL
źródło

Żeby było jasne, staram się zrozumieć, jak działa selektor element.class. W szczególności próbuję użyć składni element.class, aby zastąpić kolor elementu (h2, który jest w myClass) na niebieski w przeciwieństwie do koloru klasy zielonego. Chciałbym wiedzieć, jak kierować reklamy na określony element w ramach zajęć.

— Carolyn

@Carolyn, jeśli chcesz, musisz użyć myClass na h2. W ten sposób jsfiddle.net/wDmwE . Przyczyną jest to, że reguła css na h2 zastąpi klasę .myClass w kontenerze.

— PSL

1

Niesamowite! Tak, twoja odpowiedź pomogła. Wydaje mi się, że moim problemem była specyfika (dopiero się tego uczę). Dzięki jeszcze raz!. Bardzo cenione.

— Carolyn,

1

Wreszcie. Długo szukałem tego rozwiązania. Wiedziałem o elementWithAClass.Class {}, ale nie o .Class elementInsideThisClass {}. Dziękuję Ci. Jestem ci winien piwo: D

— kv1dr

58

h2.myClassodnosi się do wszystkich h2zclass="myClass" .

.myClass h2odnosi się do wszystkich elementów h2potomnych (tj. zagnieżdżonych) elementów zclass="myClass" .

Jeśli chcesz, aby h2w kodzie HTML był niebieski, zmień CSS na następujący:

.myClass h2 {
    color: blue;
}

Jeśli chcesz mieć możliwość odniesienia się do tego h2przez klasę, a nie jej znacznik, powinieneś pozostawić CSS bez zmian i podać h2klasę a w HTML:

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

— ASGM
źródło

Dziękuję - tak naprawdę próbuję zrozumieć, jak używać selektora element.class. Chcę wszystkie elementy h2 w "myClass"

— Carolyn.

@Carolyn, czy moja zaktualizowana odpowiedź pomaga? Jeśli nie, to nie wiem, o co pytasz.

— ASGM,

Tak dziękuję!! Wciąż staram się ogarnąć konkretnością.

— Carolyn,

@Carolyn czy jest coś konkretnego, z czym masz problem?

— ASGM,

ASGM - Nie rozumiem, jak działa selektor element.class. Odkąd opublikowałem, dowiedziałem się trochę więcej (wraz z informacjami podanymi na tej stronie), więc nie korzystałem z nich poprawnie. Dzięki,

— Carolyn,

12

Selektor element.class służy do stylizacji w takich sytuacjach:

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

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

p.large {
    color:blue;
}

Zarówno twoja rozpiętość, jak i p będą miały przypisany rozmiar i grubość czcionki od .large, ale kolor niebieski zostanie przypisany tylko do p.

Jak zauważyli inni, to, z czym pracujesz, to selektory potomków.

— Andrew Clody
źródło

Dziękuję Ci. Bardzo. Wszyscy byli bardzo pomocni.

— Carolyn,

2

h2.myClassobowiązuje tylko dla h2elementów, do których myClassbezpośrednio przypisano klasę .

Chcesz to zanotować w ten sposób:

.myClass h2

Która wybiera wszystkie elementy podrzędne, myClassktóre mają zmiennąh2

— RienNeVaPlu͢s
źródło

1

:first-childSelektor CSS pozwala wskazać element, który jest pierwszym elementem podrzędnym w swoim rodzicu.

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

— Sreekumar P
źródło