Css Pseudo Classes

Merhaba dostlar, bu dersimizin konusu Css Pseudo Classes yani türkçe açıklaması ise sözde sınıflar. Css ile seçiciler oldukça önem arz etmektedir. Şimdi bu dersimizde bu seçiciler üzerine bir kaç ekleme yapalım.

En sık kullanılan Sözde sınıflarımızı ve sözde elemenlarımızı bu dersimizde öğreneceğiz.

Sözde sınıflarımız; :checked, :disabled, :first-child, :last-child, :focus, :hover, :nth-child(n), :nth-last-child(n), :nth-of-type(n) ve son olarak :empty dir.

Sözde Elemenlarımız ise; ::after, ::before, ::first-letter, ::firs-line ve ::selection dur.

Css Sözde Sınıflar

Sözde sınıflarımızın kullanımı aşağıdaki gibidir.

selector:pseudo-class {
  property:value;
}

Şimdi diğer örneklerimize geçelim.

div:hover {
  background-color: blue;
}

p:first-child {
  color: blue;
}

p:last-child {
  color: blue;
}

input:checked {
  height: 50px;
}

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}

input:focus {
  background-color: yellow;
}

p:empty {
  background: #ff0000;
}

p:nth-child(2) {
  background: red;
}

p:nth-last-child(2) {
  background: red;
}

p:nth-of-type(2) {
  background: red;
}

Yukarıda sık kullanılan Sözde sınıflar örnekler ile verildi. oldukça basit. Örnekler yaparak sizde daha rahat yapabilirsiniz.

Css Sözde Elemanlar

Sözde elemanlarımızın kullanımı aşağıdaki gibidir.

selector::pseudo-element {
  property:value;
}

Şimdi diğer örneklerimize geçelim.

p::first-line {
  color: #ff0000;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

h1::before {
  content: url(smiley.gif);
}

h1::after {
  content: url(smiley.gif);
}

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

İşte bu kadar değerli dostlar. Bol bol örnekler yapıp konunun mantığını kavramayı unutmayın. Bir diğer derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares