Sınıf - CSS Hileleri | CSS Almanak 2024

CSS'de bir sınıf seçici, aşağıdaki gibi bir nokta (.) İle başlar:

.class ( )

Bir sınıf seçici, eşleşen bir sınıf özelliğine sahip tüm öğeleri seçer.

Örneğin, bu öğe:

Push Me

şu şekilde seçilir ve şekillendirilir:

.big-button ( font-size: 60px; )

Bir sınıfa harf, kısa çizgi (-) veya alt çizgi (_) ile başlayan herhangi bir ad verebilirsiniz. Sınıf adlarında sayıları kullanabilirsiniz, ancak sayı, kısa çizgiden sonraki ilk karakter veya ikinci karakter olamaz. Delirmezseniz ve seçicilerden kaçmaya başlamazsanız, bu tuhaf olabilir:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Bir eleman birden fazla sınıfa sahip olabilir:


 This paragraph will get styles from .intro and .blue selectors.

Birden çok sınıfa sahip bir öğe, her sınıf için CSS kuralları ile stilize edilir. Öğeleri seçmek için birden çok sınıfı da birleştirebilirsiniz:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Bu demo, tek sınıf seçicilerin birleşik seçicilerden ne kadar farklı olduğunu gösterir:

Bir sınıf seçiciyi, bazen "etiket niteleme" olarak adlandırılan belirli bir öğe türüyle de sınırlayabilirsiniz:

ul.menu ( list-style: none; )

Özgüllük

Kendi başına, bir sınıf seçicisinin özgüllük değeri 0, 0, 1, 0'dır. Bu, bir öğe seçiciden (örneğin:) "daha güçlü", a ( )ancak bir Kimlik seçiciden (gibi #header ( )) daha az güçlüdür . Sınıf seçicilerini birleştirdiğinizde veya seçiciyi belirli bir öğeyle sınırladığınızda özgüllük artar.

JavaScript ile Sınıflara Erişim

classListJavaScript'te bir öğenin sınıflarını okuyabilir ve değiştirebilirsiniz . Örneğin, bir sınıf eklemek şöyle olabilir:

document.getElementById('italicize').classList.add('italic');

Bu demo, kullanımdaki temel örnekleri gösterir classList:

jQuery da dahil olmak üzere, sınıfları ile etkileşim için yöntemler vardır .addClass(), .removeClass(), .toggleClass()ve .hasClass().

Daha fazla bilgi

Sınıf seçiciler için W3C spesifikasyonunu okuyun.
Anlamsal sınıf adları hakkında daha fazla bilgi edinin.
Özgüllük hakkında daha fazla bilgi edinin.
Sınıflar ve kimlikler arasındaki fark hakkında bilgi edinin.
Birden çok sınıf seçici ve sınıf / kimlik seçici kombinasyonları hakkında bilgi edinin.
.ClassList API'si hakkında bilgi edinin.
JQuery'de sınıf manipülasyonu hakkında bilgi edinin.