Elementu klases CSS

Iepriekšējās nodarbībās mēs atlasījām lapas elementus pēc atzīmes nosaukuma, piešķirot stilus, piemēram, vienlaikus visiem rindkopām. Tomēr lapā var būt dažāda veida rindkopas, kurām jāpiemēro dažādi stili. Lai atrisinātu šādu problēmu, dažādas rindkopas var piedēvēt dažādām CSS klasēm.

Lai piedēvētu atzīmi kādai klasei, šai atzīmei jāpievieno atribūts class, un tajā - jūsu izdomāts klases nosaukums, kas sastāv no burtiem, cipariem, pasvītrojuma zīmēm un defisiem.

Apskatīsim piemērā. Izveidosim rindkopas ar divu veidu klasēm - eee un zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Tagad pievērsīsimies CSS rindkopām ar dažādām klasēm un piešķirsim kādu stilu. Piemēram, nokrāsosim rindkopas ar klasi zzz sarkanā krāsā, bet rindkopas ar klasi eee - zaļā krāsā.

Lai to izdarītu, CSS failā jāpievēršas mūsu klasēm. Pievēršanās ir ar šādu sintaksi: vispirms ir punkta simbols, un tad mūsu izdomāts klases nosaukums. Tas ir, lai piekļūtu klasei eee, jāraksta .eee, bet klasei zzz - jāraksta .zzz.

Tātad, izdarīsim aprakstīto. Pievienosim mūsu HTML arī CSS stilus ievadītajām klasēm:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Ja palaidīsim mūsu kodu, tad rezultātā iegūsim sekojošo:

Dots sekojošs kods:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Nokrāsojiet sarkanā krāsā elementus ar klasi odd un zaļā krāsā - elementus ar klasi eve.

Dots sekojošs kods:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Nokrāsojiet sarkanā krāsā visus elementus ar klasi eee.

Paskaidrojiet, kāpēc iepriekšējā uzdevumā sarkanā krāsā tiek nokrāsotas li atzīmes, lai gan klase, kas piešķir krāsu, ir piešķirta ul atzīmei.