CSS seçiciler ön-yüz (frontend) tasarımcılar için hayat kurtarıcı, kolay yordamlardır.
Her ne kadar UI ve UX tasarımcılar ve hatta yazılımcılar bu konuya eğilmeyi ihmal veya reddetseler de, öğrenildiğinde ne kadar kolay ve keyifli çözümler ürettiğini göreceksiniz.
Öncelikle herkese karmaşık gelen :nth-child seçicisinin kullanımına bir bakalım.
Bunu da bir şema ile gösterelim:
| first-child | 1 | 2 | 3 | 4 | 5 | 6 |
| last-child | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(3) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-last-child(2) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(odd) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(even) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(n+4) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(3n-1) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(3n+1) | 1 | 2 | 3 | 4 | 5 | 6 |
| nth-child(3n) | 1 | 2 | 3 | 4 | 5 | 6 |
Şimdi dekullanımı, örnek ve açıklamalarıyla en çok tercih edilen seçicileri inceleyelim.
| Kullanım | Örnek | Açıklama |
|---|---|---|
| * | * {box-sizing:border-box} | “*” Genel kapsayıcı. Sayfadaki tüm elemanlare uygulanır |
| #id | #mailAdress | “#” (diyez/sharp) işareti “id”. Sayfada tek ve/veya kapsayıcı elemanlarde kullanılır |
| .class | .gorsel | “.” (nokta) işareti, “class” tanımlayıcıdır. aynı isimdeki/sınıftaki tüm elemanlar |
| :active | a:active | Hem link <a> ve hem de aktif durumdaki elemanlar |
| :checked | input:checked | Sayfadaki tüm seçili <input> elemanlari |
| :empty | div:empty | “:empty” hiç alt kırılımı olmayan elemen. Hiç alt öğesi olmayan tüm <div> elemanlari |
| :first-child | p:first-child | Paragraflar içerisindeki ilk alt eleman. |
| :first-of-type | p:first-of-type | <p> tipindeki ilk alt eleman |
| :nth-child(n) | p:nth-child(3) | Baştan n sıradaki alt eleman. Bu örnekte paragrafın altındaki 2. alt eleman. |
| :nth-last-child(n) | li:nth-last-child(3) | Sondan n sıradaki eleman. Bu örnekte: Listede sondan üçüncü alt eleman seçilmiş |
| :nth-of-type(n) | p:nth-of-type(2) | <p> tipindeki 2. alt eleman olan <p> elemanlari |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Aynı tipteki sondan x numaralı eleman. Sondan ikinci <p> tipinde mevcut olan <p> elemanlari |
| [attribute$=value] | a[href$=”.pdf”] | “$” regex bitiş değeri işareti. “href” attribute değeri “.pdf” ile biten tüm <a> elemanlari |
| [attribute*=value] | a[href*=”detay”] | href attribute değeri “detay” kelimesini içeren tüm <a> elemanlari |
| [attribute=value] | [target=_blank] | target=”_blank” attribute olan tüm elemanlar |
| [attribute] | [target] | “target” attribute’e sahip tüm elemanlar |
| [attribute^=value] | a[href^=”https”] | “^” regex başlangıç değeri işareti. “href” attribute değeri “https” ile başlayan tüm <a> elemanlari |
| tüm paragraflar | p | Sadece eleman adı. tüm <p> elemetleri |
| div’lerin altındaki paragraflar | div p | İki eleman arasında boşluk olması: <div> elemani altındaki(kaçıncı kırılım ve kaçıncı üye olduğu farketmeksizin) tüm <p> elemanlari |
| eleman > eleman | div > p | “>” işareti, bir elemtin hemen altındaki diğer eleman. <div> elemaninin hemen alt kırılımında yer alan <p> elemanlari |
| eleman + eleman | div + p | “+” işareti, aynı seviyedeki elemanlar. Aynı seviyedeki <div> elemaninden hemen sonra gelen <p> elemani |