Bu yazının ilk kısmına buradan, ikinci kısmına da buradan ulaşabilirsiniz.

CSS’ in az bilinen özellikleri yazı dizisinin devamında seçicilerin pseduo elementleri ile daha etkin kullanımını göreceğiz. Önceki yazılarda

• !IMPORTANT ifadesi
• Yazıtipi entegre etme (içerme)
• Gelişmiş CSS Seçicileri

konularına değinmiştik.

Bu makalede anlatılanlar:

• CSS 1 Pseduo-Elementleri (active, hover, first-letter, first-line, visited)
• CSS 2 Pseduo-Elementleri (after, before, first-child, focus, lang)
• CSS 3 Pseduo-Elementleri (last-child, nth-child, empty, not(), enabled, disabled, checked)

Pseduo Elementleri CSS 1′ den beri desteklenen bir özelliktir. Tabi ki yeni sürümlerinde daha fazla seçenekler getirmektedir. Bende bu sürüm farklılıklarından dolayı ilk bu elementleri sürüm sırasına göre anlatmayı düşünüyorum.
Öncelikle nasıl kullanıldıkların bakalım:

a:hover { font-weight:bold; }

Şekildeki kullanım en basit kullanımdır. Burada “:hover”, “a” elementleri için geçerli oluyor. Birleşik kullanımlı bir selector olsaydı, aşağıdaki gibi;

.menu a:hover { font-weight:bold; }

“:hover”, burada “.menu” altındak, “a” elementini ilgilendiriyor. “.menu” sınıfındaki elementler bundan etkilenmez. O zaman pseduo elementleri hangi seçicinin yanına yazıldıysa onu ilgilendirir diyebiliriz.

CSS 1 Pseduo Elementleri

:active – Daha fazla bilgi

.active:active { background-color:#333; color:#FFF; }

Normalde linkler için geçerlidir ama diğer html elemanları da kullanabilir. Fare ile linke tıkladıktan sonra parmağımızı kaldırdığımız ana kadar geçen sürede olmasını istediğimiz stili belirler. Yani bir nevi MouseDown olayı diyebiliriz.
Örnek :Tıklayın

:hover – Daha fazla bilgi

.hover:hover { background-color:#333; color:#FFF; }

Farenin, söz konusu elementin üzerinde durduğu sürece kullanılacak stili belirtir. Element, işaretçi üzerinden ayrıldığında yine eski haline döner. Bu elementede MouseHover olayı diyebiliriz.
Örnek : Üzerine gelin

:first-letter – Daha fazla bilgi

p:first-letter { font-size:1.5em; }

Belirtilen elementin içindeki yazının ilk harfini etkiler.

:first-line – Daha fazla bilgi

p:first-line { font-size:1.5em; }

“:first-letter” e benzer ama ilk satırı etkiler.

:visited – Daha fazla bilgi

a:visited { color:gray; }

Sadece bağlantılar(“a” elementi) için geçerlidir. Ziyaret edilen linklerin stilini belirler.

CSS 2 Pseduo Elementleri

:after ve :before – Daha fazla bilgi : after, before

.after:after { content:” – Burası CSS ile eklendi”; }

Etki ettiği seçicinin öncesine veya sonrasına kural belirlemek için kullanılır. Bu stillerde daha çok “content”(içerik) özelliği kullanılır. Örneğin, tüm “span” elementlerinin önüne veya sonuna birşeyler eklemek gibi.
Örnek : Lorem ipsum.

:first-child – Daha fazla bilgi

div:first-child { font-weight:bold; }

Elementin içerisindeki ilk alt elementi etkileyen stil belirler.
Örnek için tıklayın.

:focus – Daha fazla bilgi

input:focus { background-color:yellow; }

Bu pseduo element ise sadece form elemanları “input, select” için geçerlidir. Etkin olan elementin stilini belirler.
Örnek :

:lang() – Daha fazla bilgi

q:lang(en) { quotes: “«” “»”; }

Elementleri “lang” özniteliği dili belirler. Bu pseduo element de “lang” ile belirtilen dile uygun stiller belirler.
Örnek :
Normal alıntı : Bu bir alıntı
İngilizce alıntı(lang=en) : Bu bir alıntı

CSS 3 Pseduo Elementler

:last-child – Daha fazla bilgi

div:last-child{ background-color:#333; color:#FFF; }

“:first-child” ile mantık olarak aynıdır. Son alt elemente etki eder.

:nth-child() – Daha fazla bilgi

div:nth-child(3){ background-color:#333; color:#FFF; }

Parantezler içerisinde belirtilen sıra numarasındaki alt elemente etki eder.

:empty – Daha fazla bilgi

span:empty{ background-color:#333; color:#FFF; }

İçi boş elementlerin stilini belirtir

:not() – Daha fazla bilgi

:not(#foo) { background-color:#333; color:#FFF; }

İşte çok işinize yarayacağını sandığım bir pseduo element. Parantezler içerisine yazılan seçiciye uymayan elementleri etkiler. Örneğin, :not(#foo) yazdığımızda “foo” id’ sine sahip olmayan elementleri etkiler.

:enabled, :disabled ve :checked – Daha fazla bilgi : enabled, disabled, checked

input:disabled { background-color:#EAEAEA; }

Form elementleri için etkin olan veya olmayan, veya checkboxlar için işaretli olan veya olmayan öğeleri etkiler.

Popularity: 17%