Bu gelişmiş CSS seçicileri kullanarak web tasarımlarınız üzerinde daha fazla güç kazanın.

CSS, stillendirmeye yönelik öğeleri tanımlamak için her biri kendi kural kümesine sahip çeşitli seçicileri destekler. Çoğu seçim yöntemi basit olsa da, sözde sınıflar ve sözde öğeler daha fazla esneklik sağlar. Öğeleri bir yapı içindeki durumlarına veya konumlarına göre seçmenize olanak tanır veya içeriğin belirli bölümlerini seçerler.

Bu seçicilerin kullanımı zor olabilir ve sözde sınıfları sözde öğelerle karıştırmak kolaydır; peki bunları nasıl ayırt edeceksiniz?

CSS Sözde Sınıflarını Anlamak

CSS sözde sınıfı, öğelere farklı şekillerde stil vermek için seçicilerle kullanabileceğiniz özel bir anahtar kelime gibidir. Bu anahtar kelimeler, bir kullanıcının faresini bir öğenin üzerine getirmesi, tıklatması veya giriş alanına bir şey yazması gibi belirli şeyler gerçekleştiğinde öğeleri hedeflemenize yardımcı olur.

Sözde sınıflar, kullanıcı eylemlerine göre öğelerin görünüşünü veya davranışını değiştirerek web sayfanızı daha etkileşimli ve duyarlı hale getirir. Sen ne zaman

instagram viewer
bunları diğer CSS seçicilerle kullanınstil ve etkileşim üzerinde hassas kontrol sağlarlar.

CSS Sözde Sınıf Sözdizimi ve Kullanımı

CSS sözde sınıfının sözdizimi iki nokta üst üste (:) ve ardından sözde sınıfın adı gelir. İşte temel sözdizimi:

selector:pseudo-class {
/* styles */
}

Bu sözdiziminde:

  • seçici stilleri seçmek ve uygulamak istediğiniz öğeyi veya öğeleri ifade eder. Bu bir HTML öğesi, bir sınıf, bir kimlik veya bunların birleşimi gibi daha karmaşık bir seçici olabilir. Seçici isteğe bağlıdır ancak genellikle birini kullanırsınız; o olmadan, sözde sınıfınız uygulanabileceği tüm öğeleri hedefleyecektir.
  • sözde sınıf hedeflemek istediğiniz belirli bir durumu veya koşulu temsil eden anahtar kelimedir.

CSS, sözde sınıfları işlevlerine ve hedefledikleri koşullara göre çeşitli gruplara ayırır. İşte bazı örneklerle birlikte ana kategoriler:

Kullanıcı etkileşimi

: üzerine gelin

Fare işaretçisi üzerine geldiğinde bir öğeyi seçer.

:aktif

Bir kullanıcı onu genellikle tıklatarak etkinleştirdiğinde bir öğeyi seçer.

:ziyaret

Kullanıcının ziyaret ettiği bağlantıları seçer.

Yapısal

:ilk çocuk

Bir ebeveynin ilk alt öğesini seçer.

:son çocuk

Bir ebeveynin son alt öğesini seçer.

:n'inci-çocuk (n)

Öğeleri bir ebeveyn içindeki konumlarına göre seçerek belirli çocukları hedeflemenize olanak tanır.

Formla İlgili

:engelli

Devre dışı bırakılan form öğelerini seçer.

:kontrol

İşaretli radyo düğmelerini veya onay kutularını seçer.

Kullanıcı Arayüzü Öğe Durumu

:geçersiz

Geçersiz form öğelerini seçer.

:gerekli

Form öğelerinin gerekli alanlarını seçer.

:isteğe bağlı

İsteğe bağlı alanlar olan form öğelerini seçer.

Bağlantıyla İlgili

:bağlantı

Ziyaret edilmeyen bağlantıları seçer.

Dil Tabanlı

:lang()

Öğeleri "lang" özelliğinde belirtilen dile göre seçer.

Yaygın bir örneği deneyebilirsiniz: görüntülere :hover efektleri uygulama bir galeride. Tipik stiller arasında birisi bu görsellerin üzerine geldiğinde bu görsellerin büyütülmesi veya soluklaştırılması yer alır.

CSS Sözde Öğelerini Keşfetmek

CSS sözde öğesi, bir öğenin içeriğinin belirli bölümlerine stil vermek veya ek içerik eklemek için seçicilerle birlikte kullanabileceğiniz özel bir anahtar kelime gibidir. Bu anahtar kelimeler, öğeleri içerik yapılarına göre hedeflemenize ve stillendirmenize olanak tanır.

Sözde elementler web sayfanızın tasarımını ve düzenini geliştirin size geleneksel olarak yalnızca gerçek HTML öğeleriyle mümkün olan şekillerde öğelere stil verme yeteneği vererek.

CSS Sözde Öğe Sözdizimi ve Uygulaması

CSS'deki sözde öğelerin iki nokta üst üste kullanılmasını içeren özel bir sözdizimi vardır (::) ve ardından sözde öğenin adı gelir. İşte temel sözdizimi:

selector::pseudo-element {
/* styles */
}

Bu sözdiziminde:

  • seçici sözde öğeyi uygulamak istediğiniz öğeyi hedefler. Hiçbiri dahil geçerli herhangi bir CSS seçici olabilir.
  • sözde eleman hedeflemek istediğiniz sözde öğenin adıdır. Bir seçicide yalnızca bir sözde öğe kullanabilirsiniz çünkü bunların birleşimi gerçekten anlamlı değildir.

İşte sözde unsurlardan bazıları:

::önce

İçeriği seçilen öğenin içeriğinden önce ekler.

::sonrasında

Seçilen öğenin içeriğinden sonra içerik ekler.

::ilk harf

Bir öğe içindeki metnin ilk harfine stil uygular.

::seçim

Kullanıcının imleçle seçtiği metin kısmına stil verir.

::işaretleyici

Bir liste öğesinin işaret kutusuna stil verir (örneğin, listedeki madde işareti noktası veya numara).

::isteka

Stilleri aşağıdaki gibi medya öğelerindeki ipuçlarına uygular:

::before ve ::after sözde elemanları anlaşılması özellikle zor olabilir, bu nedenle bunları uygulamak geri kalan konularda uzmanlaşmanıza yardımcı olacaktır.

Benzerlikler ve farklılıklar

CSS sözde sınıfları ve sözde öğeleri arasındaki benzerlikler ve farklılıklar şunlardır:

Sözde Sınıflar

Sözde Elementler

Sözdizimi

Tek iki nokta üst üste (:) ile önek eklenir.

Ön eki iki iki nokta üst üste (::) ile başlar.

Kullanım

Öğeleri durumlarına, konumlarına veya kullanıcı etkileşimlerine göre seçin ve stillendirin.

Bir öğenin içeriğinin belirli bölümlerine stil verin veya sanal öğeler oluşturun.

Seçiciler

Bir karmaşık veya bileşik seçicinin herhangi bir noktasında meydana gelebilir.

Seçicinin son bileşeni olmalıdır ve yalnızca bir kez görünebilir.

İçerik Ekleme

Özellikle duruma göre stil oluşturmak için içerik eklemez.

Seçilen öğenin içeriğinin önüne veya arkasına içerik veya sanal öğeler eklenebilir.

Tipografik Stil

Tipik olarak tipografik stillendirme için kullanılmaz.

Metin ve tipografik stil için kullanılır (örneğin, ::first-line, ::first-letter).

Hedeflenen Parçalar

Tüm öğeleri hedefler.

Bir öğenin içeriğinin belirli bölümlerini hedefler.

Tarayıcı Desteği

Genellikle iyi desteklenir.

Genel olarak iyi desteklenir, ancak bazı eski tarayıcıların desteği sınırlı olabilir.

Sözde sınıflar ve sözde öğeler CSS'de çeşitli stiller ve etkileşimli özellikler oluşturmak için önemlidir. Bazı benzerlikleri olsa da, her birinin web tasarımı ve geliştirmesinde kendine özgü rolleri vardır.

Sözde Sınıflar ve Sözde Öğeler İş Başında

Anlayışınızı değerlendirmek için farklı projelerde CSS sözde sınıflarını ve sözde öğelerini kullanarak pratik yapabilirsiniz. Yapabileceğiniz kolay projelere örnek olarak profil kartları, gezinme menüleri ve liste stili verilebilir. Bu projeler, web tasarımlarınıza etkileşim ve stil katarken CSS becerilerinizi geliştirmek için uygulamalı deneyim sağlar.