Çok Kullanılan CSS Seçicileri

1. *: Bu #container div öğesinin altındaki her bir çocugu hedefleyecektir.
#container * {
 border: 1px solid black;
}

2. X Y: Descendant(torun)seçicisidir. Seçicilerinizde daha spesifik olmanız gerektiğinde bunları kullanırsınız
li a {
  text-decoration: none;
}

3. X:visited and X:link: Tıklanmamış tüm link etiketlerini :link hedefler ve :visited ise tıklanılmış linkleri hedefler.
a:link { color: red; }
a:visted { color: purple; }

4. X + Y: Komşu seçici denir. Yalnızca önceki öğenin hemen sonrasında bulunan öğeyi seçer. Ör: her ul'den sonraki sadece ilk paragrafı metnini kırmızı yapar.
ul + p {
   color: red;
}

5. X > Y: Standart X Y ile arasındaki fark, direk çocukları seçecektir. Ör: Sadece container içerisindeki ul'ler hedeflenir, li içerisindeki ul'ler hedeflenmez. İçtekileri de hedeflemek için div#container ul kullanılır.
div#container > ul {
  border: 1px solid black;
}
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

6. X ~ Y: X + Y yanlnızca ilk seçicinin hemen sonrasındaki seçerken X ~ Y ile seçicin sonrasındaki sıra farketmeksizin tümünü seçer.
ul ~ p {
   color: red;
}

7. X[title]: Nitelik seçicidir. Ör:Yalnızca bir title(başlık) özelliğine sahip olan link etiketleri seçecektir.a[title] {
   color: green;
}

8. X[href="foo"]: href niteliği "foo" olan elementler hedeflenir.
a[href="https://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

9. X[href*="nettuts"]: Yıldız tırnak içindeki değerin özelliğin içinde bir herhangi bir yerde bulunması gerektiğini belirtir. Dizenin başını ve sonunu işaretlemek için ^ ve $ kullanılır. ^ ile belirttiğimiz kelime ile başlayanları, # ile ise belirttiğimiz kelime ile bitenleri seçtirtebiliriz.
a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

10. X[href$=".jpg"]: sonu .jpg ile biten href içeriklerine göre elementleri hedefler.
a[href$=".jpg"] {
   color: red;
}

11. X[foo~="bar"]: Hedeflenen içeriklerde "bar" dizesinin geçmesi seçmek için yeterlidir. Ör: <a href="path/image.jpg" data-info="external image"> Click Me, Fool </a>
a[data-info~="external"] {
   color: red;
}

12. X:checked: Bu takma sınıf, aktif hale gelen bir kullanıcı arabirimi öğesini (bir radyo düğmesi veya onay kutusu gibi) hedefleyecektir. Ör: radio seçildiğinde ilk öğesi olan label mavi olur.
input[type=radio]:checked + label {
          color: blue;
}

13. X:after: Önce(before) ve sonra(after) takma sınıfları superdir. Seçilen öğenin etrafında içerik oluşturmaya olanak sağlarlar.
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

14. X:hover: Bir öğenin üzerine fare ile gelindiğinde çalışır.
div:hover {
  background: #e3e3e3;
}

15. X:not(selector): Ör id'si container olan div'ler dışındaki bütün div'leri seçmek için
div:not(#container) {
   color: blue;
}

16. X::pseudoElement:Pseudo elemanlarını(:: ile belirlenir) kullanarak bir öğenin ilk satırı veya ilk harfi gibi belli bir parçasına stil uygulamanızı sağlar.
p::first-letter { //paragrafın ilk harfi hedeflenir.
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

p::first-line { //Paragrafın İlk Satırını Hedefleyin
   font-weight: bold;
   font-size: 1.2em;
}

17. X:nth-child(n): Liste elemanını hedeflemek için kullanılır. Ör: 3.li gibi
li:nth-child(3) {
   color: red;
}

18. X:nth-last-child(n): Liste elemanını sondan hedeflemek için kullanılır. Ör: sondan 3.li gibi
li:nth-last-child(2) {
   color: red;
}

19. 24. X:nth-of-type(n): Elemanın türüne(type) göre seçmede kullanılır. Ör: Sadece içinçi ul hedeflenir.
ul:nth-of-type(3) {
   border: 1px solid black;
}

20. X:nth-last-of-type(n): Elemanın türüne(type) göre sondan başlayarak seçmede kullanılır.
ul:nth-last-of-type(3) {
   border: 1px solid black;
}

21. X:first-child: Yalnızca öğenin ebeveyninin ilk çocuğunu hedeflememizi sağlar.
ul li:first-child {
   border-top: none;
}

22. X:last-child: Yalnızca öğenin ebeveyninin son çocuğunu hedeflememizi sağlar.
ul > li:last-child {
   color: green;
}

23. X:only-child: Ebeveyninin tek çocuğu olan öğeleri hedeflemenize izin verir. Ör: div içerisinde tek p etiketi olanları hedefler.
div p:only-child {
   color: red;
}

24. X:only-of-type: Ana evebeyn konteyneri içinde kardeşi olmayan öğeleri hedefleyecektir. Örnek olarak, tek bir liste öğesine sahip tüm ul'leri hedef alalım.
ul > li:only-of-type {
   font-weight: bold;
}

25. X:first-of-type: first-of-type, türünün ilk kardeşlerini seçmenize izin verir.
<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
 
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

"List Item 2" hedeflemek için;
Çözüm1:Bu kod kısaca, "sayfadaki ilk sırasız listeyi bul, daha sonra yalnızca liste öğeleri olan en yakın olan çocukları bul" diyor. Sonrada, bu bulunan setteki sadece ikinci liste öğesine göre filtreleme yapılıyor.
ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}
Çözüm2:Başka bir seçenek, bitişik seçiciyi kullanmaktır. Bu senaryoda, p etiketinin hemen sonrarsındaki ul'yi buluruz ve daha sonrada öğenin son çocuğunu buluruz.
p + ul li:last-child {
   font-weight: bold;
}
Çözüm3: Sayfadaki ilk ul'ı kapıyoruz ve alttan başlayarak ilk liste öğesini buluyoruz
ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

 


Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s