CSS Konuları
CSS Seçicileri (CSS Selectors)
06/09/2023
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
* {
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;
}