css-sinif-seciciler

Bir elemanın özel durumunu tanımlamak için bir sahte sınıf kullanılır.

Örneğin, aşağıdakiler için kullanılabilir:

Kullanıcı üst üste geldiğinde bir öğe stilinde bulun

Stil ziyaret ve ziyaret edilmeyen bağlantılar farklı

Odaya odaklandığında bir öğe stilini ayarlayın

selector:pseudo-class {

property:value;

}


Çapa sahte sınıfları

Bağlantılar farklı şekillerde görüntülenebilir:

a:link {

color: #FF0000;

}


a:visited {

color: #00FF00;

}


a:hover {

color: #FF00FF;

}


a:active {

color: #0000FF;

}

Not: a:hover sonra gelmelidir a:link ve a:visited sırayla CSS tanımında etkili olduğu! Etkili olması için CSS tanımında a:active sonra gelmelidir ZORUNLU a:hover! Sahte sınıf adları büyük / küçük harf duyarlı değildir.



Sahte sınıflar ve CSS Sınıfları

Sahte sınıflar CSS sınıflarıyla birleştirilebilir:

Örnekteki bağlantıya geldiğinizde renk değişecektir:

a.highlight:hover {

color: #ff0000;

}


Fareyle üzerine <div>

:hover Sahte sınıfı bir <div> öğesinde kullanma örneği :

div:hover {

background-color: blue;

}


Basit İpucu İpucu

< P> öğesini göstermek için farenizle <div> öğesinin üzerine gelin (araç ipucu gibi):

p {

display: none;

background-color: yellow;

padding: 20px;

}

div:hover p {

display: block;

}


CSS - The first-child Pseudo-class

:first-childSözde sınıfı bir öğenin ilk çocuğu olan belirtilen elemanı ile eşleşir.

İlk <p> öğesini eşleştir

Aşağıdaki örnekte seçici, herhangi bir öğenin ilk alt öğesi olan herhangi bir <p> öğesiyle eşleşir:

p:first-child {

color: blue;

}


Tüm <p> öğelerindeki ilk <i> öğesini eşleştirin

Aşağıdaki örnekte seçici, tüm <p> öğelerindeki ilk <i> öğesiyle eşleşir:

p i:first-child {

color: blue;

}


Tüm ilk öğe <p> öğelerindeki tüm <i> öğelerini eşleştirin

Aşağıdaki örnekte seçici, başka bir öğenin ilk alt öğesi olan <p> öğelerindeki tüm <i> öğeleriyle eşleşir:

p:first-child i {

color: blue;

}

CSS - The: lang Sözde sınıf

:lang Sözde sınıf Farklı diller için özel kurallar tanımlamanızı sağlar.

Aşağıdaki örnekte, :lang = "no" olan <q> öğelerinin tırnak işaretlerini tanımlar:

< html>

< head>

< style>

q:lang(no) {

quotes: "~" "~";

}

< /style>

< /head>

< body>

< p>Yazı <q lang="no">A quote in a paragraph</q> Some text.</p>

< /body>

< /html>



Tüm CSS Sahte Sınıfları


:active Etkin bağlantıyı seçer

:checked input:checked Seçilen her <input> öğesini seçer

:disabled input:disabled Her devre dışı <input> öğesini seçer

:empty p:empty Hiçbir çocuğu olmayan her <p> öğesini seçer

:enabled input:enabled Etkinleştirilmiş her <input> öğesini seçer

:first-child p:first-child Ebeveyninin ilk çocuğu olan her <p> öğesini seçer

:first-of-type p:first-of-type Üst öğesinin ilk <p> öğesi olan her <p> öğesini seçer

:focus input:focus Odaklamaya sahip <input> öğesini seçer

:hover a:hover Fareyle üzerine bağlantı seçer

:in-range input:in-range Belirtilen aralıktaki bir değere sahip <input> elemanlarını seçer

:invalid input:invalid Geçersiz bir değere sahip tüm <input> elemanlarını seçer

:lang(language) p:lang(it) Her <p> öğesini "it" ile başlayan lang öznitelik değeri ile 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 Üst öğesinin son <p> öğesi olan her <p> öğesini seçer

:link a:link İstenilmeyen tüm bağlantıları 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) Son çocuğun sayımı ile ebeveyninin ikinci çocuğu olan her <p> öğesini seçer

:nth-last-of-type(n) p:nth-last-of-type(2) Üst çocuğun ikinci <p> öğesi olan her <p> öğesini son çocuğa göre sayarak 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 Üst öğesinin yalnızca <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" özeliği olmayan <input> öğelerini seçer.

:out-of-range input:out-of-range Belirtilen aralık dışında bir değere sahip <input> öğelerini seçer.

:read-only input:read-only "Readonly" özniteliği belirtilen <input> elemanlarını seçer

:read-write input:read-write "Readonly" özeliği olmayan <input> öğelerini seçer

:required input:required "Required" özniteliği belirtilen <input> elemanlarını seçer

:root root Belgenin kök elemanını seçer

:target #news:target Geçerli # etkin haber öğesini seçer (bu bağlantı URL'si içeren bir URL'yi tıklar)

:valid input:valid Geçerli bir değere sahip tüm <input> öğelerini seçer

:visited a:visited Ziyaret edilen tüm bağlantıları seçer



Tüm CSS Sözde Elemanları

::after p::after Her <p> öğesinin ardından içerik yerleştirin

::before p::before Her <p> öğesinden önce içerik yerleştirme

::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

::selection p::selection Bir elemanın, bir kullanıcı tarafından seçilen kısmını seçer