Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleri
İçindekiler
CSS (Cascading Style Sheets), web sayfalarının görsel tasarımını kontrol etmemizi sağlayan güçlü bir stil dilidir. CSS’in en önemli yapı taşlarından biri olan seçiciler (selectors), HTML öğelerini hedef alarak onlara stil uygulamamıza olanak tanır. Bu makalede, CSS seçicilerini detaylı bir şekilde inceleyecek, türlerini ve kullanım örneklerini ele alacağız.
CSS Seçicileri Nedir?
CSS seçicileri, stil vermek istediğimiz HTML öğelerini seçmek için kullandığımız ifadelerdir. Bir web sayfasındaki belirli öğeleri hedef alarak, onlara özgü stil tanımlamaları yapmamıza yardımcı olurlar. Seçiciler sayesinde, sayfadaki tüm öğeleri, belirli bir sınıfa veya kimliğe sahip öğeleri ya da belirli bir duruma sahip öğeleri seçebiliriz.
CSS Seçici Türleri
CSS seçicileri, farklı ihtiyaçlara göre çeşitli kategorilere ayrılır. Başlıca seçici türleri şunlardır:
- Basit Seçiciler (Simple Selectors): HTML etiketleri, sınıflar ve kimlikler gibi temel öğeleri seçer.
- Birleştirici Seçiciler (Combinator Selectors): Öğeler arasındaki ilişkilere göre seçim yapar.
- Sözde Sınıf Seçiciler (Pseudo-class Selectors): Belirli durumlara veya olaylara göre öğeleri seçer.
- Sözde Eleman Seçiciler (Pseudo-element Selectors): Öğelerin belirli bölümlerini seçer.
- Öznitelik Seçiciler (Attribute Selectors): Belirli bir özniteliğe sahip öğeleri seçer.
- Genel Seçiciler (Universal Selectors): Tüm öğeleri seçen seçiciler.
1. Basit Seçiciler
Basit seçiciler, en temel seçici türleridir ve doğrudan HTML öğelerini hedef alır.
- Evrensel Seçici (
*): Sayfadaki tüm öğeleri seçer.* { margin: 0; padding: 0; }Bu stil tanımı, sayfadaki tüm öğelerin iç ve dış boşluklarını sıfırlar. - Etiket Seçiciler: Belirli bir HTML etiketini seçer. Örneğin, tüm paragraf (
<p>) etiketlerini seçmek için:p { color: blue; }Bu örnekte, sayfadaki tüm<p>etiketlerinin metin rengi mavi olacaktır. - Sınıf (Class) Seçiciler: Belirli bir sınıfa sahip öğeleri seçer. Sınıf seçicileri, nokta (
.) ile tanımlanır:.highlight { background-color: yellow; }Bu stil tanımı,class="highlight"olan tüm öğelerin arka plan rengini sarı yapar. - Kimlik (ID) Seçiciler: Belirli bir kimliğe sahip öğeleri seçer. Kimlik seçicileri, diyez (
#) ile tanımlanır:#header { font-size: 24px; }Bu stil tanımı,id="header"olan öğenin yazı boyutunu 24 piksel yapar.
2. Birleştirici Seçiciler
Birleştirici seçiciler, öğeler arasındaki hiyerarşik veya komşuluk ilişkilerine göre seçim yapmamızı sağlar.
- Ebeveyn-Çocuk Seçicisi (
>): Belirli bir öğenin doğrudan çocuklarını seçer:div > p { color: red; }Bu örnek, sadece<div>öğesinin doğrudan altındaki<p>etiketlerini seçer ve metin rengini kırmızı yapar. - Genel Kardeş Seçicisi (
~): Belirli bir öğeden sonra gelen tüm kardeş öğeleri seçer:h1 ~ p { font-style: italic; }Bu stil, bir<h1>etiketinden sonra gelen tüm<p>etiketlerini italik yapar. - Bitişik Kardeş Seçicisi (
+): Belirli bir öğeden hemen sonra gelen kardeş öğeyi seçer:h2 + p { margin-top: 0; }Bu örnek, bir<h2>etiketinden hemen sonra gelen<p>etiketinin üst marjını sıfırlar.
3. Sözde Sınıf Seçiciler
Sözde sınıf seçiciler, öğelerin belirli durumlarına veya kullanıcı etkileşimlerine göre seçim yapar.
:hover: Fare imleci bir öğenin üzerindeyken uygulanır:a:hover { color: green; }Bu stil, fare imleci bir bağlantının (<a>) üzerindeyken metin rengini yeşil yapar.:focus: Bir öğe odaklandığında (örneğin, bir form alanı seçildiğinde) uygulanır:input:focus { border-color: blue; }Bu stil, odaklanmış (<input>) öğesinin kenarlık rengini mavi yapar.:nth-child(n): Ebeveyninin n’inci çocuğu olan öğeyi seçer:li:nth-child(2) { font-weight: bold; }Bu örnek, bir liste içerisindeki ikinci<li>öğesini kalın yapar.
4. Öznitelik Seçiciler
Öznitelik seçiciler, belirli bir özniteliğe veya öznitelik değerine sahip öğeleri seçer.
- Belirli bir özniteliğe sahip öğeleri seçme:
a[target] { color: orange; }Bu stil,targetözniteliğine sahip tüm bağlantıların rengini turuncu yapar.
Bu yazıda CSS seçicilerinin tüm yönlerini inceledik. Seçiciler, web tasarımının en önemli bileşenlerinden biridir ve doğru kullanıldığında, etkili ve düzenli bir stil yapısı oluşturmanıza yardımcı olur.
CSS seçicileri nedir?
CSS seçicileri, HTML öğelerini belirleyip onlara stil uygulamamızı sağlayan kod parçalarıdır. Seçiciler sayesinde belirli bir etikete, sınıfa, kimliğe veya duruma göre stil belirleyebiliriz.
En yaygın kullanılan CSS seçicileri nelerdir?
Etiket seçiciler (
p,h1,divvb.)
Sınıf seçiciler (.class)
ID seçiciler (#id)
Öznitelik seçiciler ([type="text"])
Sözde sınıf seçiciler (:hover,:nth-child())Sınıf (
.class) ve kimlik (#id) seçicileri arasındaki fark nedir?Sınıf seçicileri (
.class) birden fazla öğeye uygulanabilir.
Kimlik seçicileri (#id) benzersizdir ve bir sayfada yalnızca bir öğeye uygulanmalıdır.Evrensel seçici (
*) nedir ve nasıl kullanılır?Evrensel seçici (
*), sayfadaki tüm öğeleri seçmek için kullanılır. Örneğin:* { margin: 0; padding: 0; }:hoverseçicisi ne işe yarar?:hoverseçicisi, fare imleci bir öğenin üzerine geldiğinde belirli bir stil uygulanmasını sağlar.nth-child(n)ne anlama gelir?nth-child(n), belirli bir sıradaki öğeyi seçmek için kullanılır.Örneğin:li:nth-child(2) { color: red; }
Bu kod, bir listede ikinci<li>öğesinin metin rengini kırmızı yapar.CSS’de bir öğenin yalnızca belirli bir ebeveynin altındayken stil almasını nasıl sağlayabilirim?
CSS’de bir öğenin yalnızca belirli bir ebeveynin altındayken stil almasını nasıl sağlayabilirim?
Bir öğeyi yalnızca belirli bir ebeveynin içindeyken seçmek için ebeveyn-çocuk seçicisi (>veya boşluk) kullanabilirsiniz.div p { font-size: 16px; }
Bu kod, yalnızca<div>içindeki<p>öğelerini hedef alır.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!