CSS Konuları

CSS Seçicileri (CSS Selectors)

06/09/2023
CSS Selectors

HTML etiketlerine CSS özelliği belirtirken birden birkaç CSS seçici çeşidi kullanılıyor; universal selector, type selector, class selector, id selector, attribute selector ve grouping selector seçici çeşitlerini inceleyin.

Universal Selector

Evrensel seçici (*), HTML sayfasındaki herhangi bir öğeyle eşleşir. Evrensel seçici aynı zamanda wildcard olarak da bilinir.

* {
 box-sizing: border-box;
}

Bu kodla box-sizing: border-box; her HTML öğesi box-sizing’e sahiptir.

Type Selector

Doğrudan HTML öğesini eşleştirmek için kullanarak seçiciyi yazın.

div {
 padding: 1rem;
}

Class Selector

<style>
.text {
 font-size: 20px;
}
</style>

<p class="text">Lorem ipsum dolor sit amet.</p>

ID Selector

Id seçiciyle, elemente CSS uygulanır. # işareti CSS’yi belirtirken kullanılır.

<style>
#text {
 font-size: 20px;
}
</style>

<p id="text">Lorem ipsum dolor sit amet.</p>

Attribute Selector

CSS özelliği, HTML etiketinin nitelikleriyle (attribute) uygulanır.

<style>
[target="_blank"] {
 color: red;
}
</style>

<a href="#" target="_blank">Link</a>

Grouping Selector

#id,
.class,
div,
[target="_blank"] {
 color: red;
}