Ç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;   
}

 


jquery en çok kullanılan seçiciler-filtreler

Jquery ile aşağıdakiler gibi vs işlemler yapılabilir.
-ismi “iletisim” olan nesneler üzerinde işlem yap ,
-id’si “kaydet” adında butonlara işlem yap,
-index numarası “3” den küçük labelleri seç ya da üzerinde işlem yap,
-listeler içinde çift index numaralı nesneleri seç,
-checkbox kutularından “seçili” stiline sahip ilk nesneyi seç ya da üzerinde işlem yap

jquery seçiciler-filtreler

Metod Açıklama
$(a[name]); name özelliği olan linkleri seçer.
$(a[name=”anasayfa”]); name özelliği “anasayfa” olan linkeri seçer.
$(a[name^=”ana”]); name özelliği “ana” ile başlayan linkeri seçer.
$(a[name$=”sayfa”]); name özelliği “sayfa” ile biten linkeri seçer.
$(a[name!=”anasayfa”]); name özelliği “anasayfa” olmayan linkeri seçer.
$(a[name*=”say”]); name özelliği içinde “say” ifadesi geçen linkeri seçer.
Filtre Açıklama
:first index numarası 0 olan nesneyi seçer.İlk nesneyi seçer.
:last en son index numarasına sahip olan nesneyi seçer.Son nesneyi seçer.
:not belirtilen özelliğin değilini seçer.
:even Çift index numarasına sahip olan nesneleri seçer.0,2,4,6 gibi.
: odd tek index numarasına sahip olan nesneleri seçer.1,3,5,7 gibi.
:eq(4) 4 index numarasına sahip olan nesneyi seçer
:gt(4) 4 index numarasından büyük olan nesneleri seçer
:lt(4) 4 index numarasından küçük olan nesneleri seçer