CSS Selectors Nedir? Türleri Nelerdir?
Cascading Style Sheets (CSS), web sayfalarının görünümünü düzenlemek ve stil vermek için kullanılan bir web teknolojisidir.
CSS Selectors (Seçiciler) Nedir?
CSS Selectors (CSS Seçiciler), web sayfalarındaki HTML veya XML öğelerini belirlemek ve stil uygulamak için kullanılan ifadelerdir. Bu seçiciler, belirli bir öğeyi veya öğe grubunu hedefleyerek, onlara özel stil kuralları tanımlamayı sağlar. CSS Selectors, web sayfalarının görünümünü düzenlemek ve stil vermek için temel bir araçtır.
CSS Selectors (Seçiciler) Türleri:
| Seçiçi | Örnek Kullanım | Açıklama |
|---|---|---|
| .class | .intro | class=”intro” içeren tüm öğeleri seçer |
| .class1.class2 | .name1.name2 | Hem name1 hem de name2 ayarlı tüm öğeleri seçer |
| .class1 .class2 | .name1 .name2 | name1 altında bulunan tüm name2 öğelerini seçer |
| #id | #ishak | id=”ishak” olan öğeyi seçer |
| * | * | Tüm öğeleri seçer |
| element | p | Tüm <p> öğelerini seçer |
| element.class | p.intro | class=”intro” içeren tüm <p> öğelerini seçer |
| element,element | div, p | Tüm <div> öğelerini ve tüm <p> öğelerini seçer |
| element element | div p | <div> öğelerinin içindeki tüm <p> öğelerini seçer |
| element>element | div > p | Üst öğesi bir <div> öğesi olan tüm <p> öğelerini seçer |
| element+element | div + p | <div> öğelerinden hemen sonra yerleştirilen ilk <p> öğesini seçer |
| element1~element2 | p ~ ul | Önünde bir <p> öğesi bulunan her <ul> öğesini seçer |
| [attribute] | [target] | Hedef niteliğine sahip tüm öğeleri seçer |
| [attribute=value] | [target=”_blank”] | target=”_blank” içeren tüm öğeleri seçer |
| [attribute~=value] | [title~=”cicek”] | “cicek” kelimesini içeren bir başlık niteliğine sahip tüm öğeleri seçer |
| [attribute|=value] | [lang|=”tr”] | lang öznitelik değeri “tr “ye eşit olan tüm öğeleri seçer veya “tr-” ile başlayan |
| [attribute^=value] | a[href^=”https”] | href öznitelik değeri “https” ile başlayan her <a> öğesini seçer |
| [attribute$=value] | a[href$=”.pdf”] | href öznitelik değeri “.pdf” ile biten her <a> öğesini seçer |
| [attribute*=value] | a[href*=”ishak.dev”] | href öznitelik değeri “ishak.dev” alt dizesini içeren her <a> öğesini seçer |
| :active | a:active | Etkin bağlantıyı seçer |
| ::after | p::after | Her <p> öğesinin içeriğinden sonra bir şey ekleyin |
| ::before | p::before | Her <p> öğesinin içeriğinden önce bir şey ekleyin |
| :checked | input:checked | İşaretlenen her <input> öğesini seçer |
| :default | input:default | Varsayılan <input> öğesini seçer |
| :disabled | input:disabled | Devre dışı bırakılan her <input> öğesini seçer |
| :empty | p:empty | Alt öğesi olmayan her <p> öğesini seçer (metin düğümleri dahil) |
| :enabled | input:enabled | Etkinleştirilmiş her <input> öğesini seçer |
| :first-child | p:first-child | Üst öğesinin ilk çocuğu olan her <p> öğesini seçer |
| ::first-letter | p::first-letter | Her <p> öğesinin ilk harfini seçer |
| ::first-line | p::first-line | Her <p> öğesinin ilk satırını seçer |
| :first-of-type | p:first-of-type | Ebeveyninin ilk <p> öğesi olan her <p> öğesini seçer |
| :focus | input:focus | Odağı olan giriş öğesini seçer |
| :fullscreen | :fullscreen | Tam ekran modunda olan öğeyi seçer |
| :hover | a:hover | Fareyle üzerine gelindiğinde bağlantıları seçer |
| :in-range | input:in-range | Belirli bir aralıkta değeri olan giriş öğelerini seçer |
| :indeterminate | input:indeterminate | Belirsiz durumda olan giriş öğelerini seçer |
| :invalid | input:invalid | Geçersiz bir değere sahip tüm giriş öğelerini seçer |
| :lang(language) | p:lang(it) | lang niteliği “it” (İtalyanca) değerine eşit olan her <p> öğesini seçer |
| :last-child | p:last-child | Üst öğesinin son çocuğu olan her <p> öğesini seçer |
| :last-of-type | p:last-of-type | Ebeveyninin son <p> öğesi olan her <p> öğesini seçer |
| :link | a:link | Ziyaret edilmemiş tüm bağlantıları seçer |
| ::marker | ::marker | Liste öğelerinin işaretleyicilerini seçer |
| :not(selector) | :not(p) | <p> öğesi olmayan her öğeyi seçer |
| :nth-child(n) | p:nth-child(2) | Üst öğesinin ikinci çocuğu olan her <p> öğesini seçer |
| :nth-last-child(n) | p:nth-last-child(2) | Ebeveyninin ikinci çocuğu olan her <p> öğesini, son çocuktan itibaren sayarak seçer |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Son çocuktan itibaren sayarak, ebeveyninin ikinci <p> öğesi olan her <p> öğesini seçer |
| :nth-of-type(n) | p:nth-of-type(2) | Üst öğesinin ikinci <p> öğesi olan her <p> öğesini seçer |
| :only-of-type | p:only-of-type | Ebeveyninin tek <p> öğesi olan her <p> öğesini seçer |
| :only-child | p:only-child | Ebeveyninin tek çocuğu olan her <p> öğesini seçer |
| :optional | input:optional | “required” niteliği olmayan giriş öğelerini seçer |
| :out-of-range | input:out-of-range | Belirli bir aralığın dışında bir değere sahip giriş öğelerini seçer |
| ::placeholder | input::placeholder | “placeholder” özniteliği belirtilen girdi öğelerini seçer |
| :read-only | input:read-only | “readonly” özniteliği belirtilen giriş öğelerini seçer |
| :read-write | input:read-write | “readonly” özniteliği belirtilmemiş girdi öğelerini seçer |
| :required | input:required | “required” özniteliği belirtilen giriş öğelerini seçer |
| :root | :root | Belgenin kök öğesini seçer |
| ::selection | ::selection | Bir öğenin kullanıcı tarafından seçilen kısmını seçer |
| :target | #ishak:target | Geçerli etkin #ishak öğesini seçer (bu bağlantı adını içeren bir URL’ye tıklandığında) |
| :valid | input:valid | Geçerli bir değere sahip tüm giriş öğelerini seçer |
| :visited | a:visited | Ziyaret edilen tüm bağlantıları seçer |
ishak.dev‘i takip ederek, benimle birlikte yeni şeyler öğrenebilir, kendinizi daha iyi geliştirebilir, kodlarınızı daha güncel ve optimize hale getirebilirsiniz. Başarılı kodlamalar!
Genel
Sonraki YazıFreelance Web Tasarımcısı Nedir ve Ne Yapar?
ASP.NET Core
ASP.NET Core Attribute Routing
Merhaba!, ishak.dev'de yazılım, tasarım ve teknoloji tutkunu biri olarak kendi deneyimlerimden ve öğrendiklerimden yola çıkarak hazırladığım yazılar paylaşıyorum. ishak.dev'i düzenli takip ederek yeni yayınlarımı kaçırmayın!