Bu bölümde tüm seçicileri kapsamayacağız (bu çok uzun ve kafa karıştırıcı olacaktır). Bunun yerine, daha kullanışlı seçicilerden bazılarını inceleyeceğiz ve diğerlerinden kolayca keşfedebileceğiniz ve öğrenebileceğiniz bir temel oluşturacağız. CSS seçicileri, HTML öğelerini öğe adı, kimliği, sınıfı, özniteliği ve daha fazlasına dayanarak “bulmak” (veya seçmek) için kullanılır.
Seçicilerin Kullanımını örneklerle inceleyelim;
1 . Eleman Seçici (Element Selector)
Eleman seçici, HTML etiket adına dayalı tüm öğeleri seçer. Seçici olarak CSS bildiriminde etiket ismi vermek yeterli olacaktır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> body{ background: yellow; } h1{ text-align: center; color : green; } p { text-align: center; font-size: 24px; color: red; } </style> </head> <body> <h1>CSS Eleman Seçici</h1> <p>CSS Dersleri</p> <p>yazilimbilisim.net</p> </body> </html> |
Örneğimizde sayfanın gövdesi olan <body> öğesi arkaplanı sarı renkte, başlık olarak verilen <h1> öğesi yeşil renginde ve ortalanmış metin olarak tasarlanırken, tüm <p> öğeleri ise kırmızı renkli ortalanmış ve 24px boyutunda olacaktır. Dikkat edecek olursanız tüm <p> öğeleri bu stilden etkilenmiştir. Uygulamayı test ettiğinizde aşağıdaki gibi bir görünüm elde edilecektir.
2-Kimlik Seçicisi (Id Selector)
Seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id özniteliğini kullanır. Bir öğenin kimliği, bir sayfada benzersiz olmalıdır, dolayısıyla kimliği seçici, benzersiz bir öğe seçmek için kullanılır! Kimliği, harfler, rakamlar, altçizgiler ve çizgilerle belirtilebilir. Nesneyi temsil ettiğini kolayca tanımlayabilmeniz için açıklayıcı bir şey olarak adlandırmanız en iyisidir. Bir sayfada istediğiniz kadar çok sayıda kimliği olabilir. Sayfadaki herhangi bir etikete bir kimlik uygulayabilirsiniz.
CSS ile belirli bir kimliği olan bir öğeyi seçmek için, öğenin kimliğinden önce (#) karakteri kullanmalısınız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> #icerik { text-align: center; color: red; background-color: yellow; } </style> </head> <body> <p id="icerik">ID ile kimliklendirilmiş içerik</p> <p>Bu birinci paragraf içeriğidir.</p> <p>Bu ikinci paragraf içeriğidir.</p> </body> </html> |
Yukarıdaki stil kuralı, id = “icerik” olan HTML öğesine uygulanacaktır:
3-Sınıf Seçicisi (Class Selector)
HTML’deki bir id niteliği kullanarak tek bir öğeye atıf yapabilmenin dışında aynı anda birden çok öğeye class niteliği ile bir CSS kuralını uygulamak mümkün. Stil kurallarını öğelerin sınıf özniteliğine göre tanımlayabilir, bu sınıfa sahip tüm öğeler, tanımlanan CSS kuralına göre biçimlendirebilirsiniz. Tek bir sınıf, aynı sayfada farklı etiketler türlerine de uygulanabilir. Dikkat edilmesi gereken husus, uygulanmak istenen HTML öğelerine aynı sınıf ismini vermektir. Diğer bir husus ise belli bir sınıfa sahip öğeleri seçmek için, nokta (.) karakteri kullanarak bunu sınıfın adıyla yazın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">Kırmızı ve ortalanmış bir başlıktır</h1> <p class="center">Kırmızı ve ortalanmış bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
Yukarıdaki örnekte, class = “center” olan tüm HTML öğeleri kırmızı ve orta hizalı olacaktır.
Sınıf seçiciler belkide en çok kullanılan seçici şeklidir. Farklı kullanımlarıda mümkün olmaktadır. Örneğin;
Ayrıca, yalnızca belirli HTML öğelerinin bir sınıften etkilenmesi gerektiğini de belirleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">Bu başlık stil kuralından etkilenmeyecektir.</h1> <p class="center">Bu paragraf kırmızı ve ortaya hizalı olacaktır.</p> </body> </html> |
Yukarıdaki örnekte, yalnızca class = “center” olan <p> öğeleri ortalanacaktır.
HTML öğeleri aynı zamanda birden fazla sınıfa da başvurabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } p.large { font-size: 300%; } </style> </head> <body> <h1 class="center">Bu başlığa stil uygulanmamıştır</h1> <p class="center">Bu paragraf kırmızı ve ortaya hizalanmıştır</p> <p class="center large">Bu paragraf kırmızı, ortaya hizalanmış ve büyük bir fonta sahiptir.</p> </body> </html> |
Yukarıdaki örnekte <p> öğesi, class = “center” ve class = “large” biçiminde olacaktır;
4- Seçicileri Gruplama (Grouping Selectors)
Aynı tarz tanımlarına sahip öğeleriniz varsa, kodu en aza indirgemek için seçicileri gruplandırmak daha iyi olacaktır. Seçicileri gruplamak için, her seçiciyi bir virgül ile ayırın ve ortak CSS bildirimlerini yazın. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } |
Yukarıdaki gibi bir durumda ortak CSS bildirimlerini ait seçicileri gruplamak iyi bir yol olacaktır.
|
1 2 3 4 5 6 |
h1, h2, p { text-align: center; color: red; } |
5- Torun Seçici (descendant selector)
Belirtilen bir öğenin altında bulunan tüm alt öğeleri seçmeniz için kullanılan bir yöntemdir. Seçiciden hemen sonra altındaki öğeleri temsilen kullanacağınız ikinci seçici ile aralarında bir boşluk (space) bırakmak yeterlidir.
Örnek
Aşağıdaki örnek, <div> öğelerindeki tüm alt <p> öğelerini seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>yazilimbilisim.net</title> <style> div p{ background-color: yellowgreen; } </style> </head> <body> <div> <p>div altında bulunan bir paragraf</p> <p>div altında bulunan bir paragraf</p> <span><p>div altında bulunan bir paragraf</p></span> </div> <p>Bu paragraf div altında değildir</p> <p>Bu paragraf div altında değildir</p> </body> </html> |
5- Çocuk Seçici (child selector)
Belirtilen bir öğenin bir alt seviyesinde bulunan tüm öğeleri seçmeniz için kullanılan bir yöntemdir. İki seçici arasında “>” işareti kullanılır.
Örnek
Aşağıdaki örnek, <div> öğelerinin hemen altında bulunan tüm <p> öğelerini seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>yazilimbilisim.net</title> <style> div>p{ background-color: yellowgreen; } </style> </head> <body> <div> <p>div altında bulunan bir paragraf</p> <p>div altında bulunan bir paragraf</p> <span><p>div altında bulunan bir paragraf</p></span> </div> <p>Bu paragraf div altında değildir</p> <p>Bu paragraf div altında değildir</p> </body> </html> |
5- Komşu Seçici (adjacent sibling selector)
Kendinden hemen sonra gelen ilk öğeyi seçmek için kullanılır. Seçiciler arası “+” işareti kullanılır.
Örnek
Aşağıdaki örnek, <div> öğelerinin hemen sonrasına yerleştirilen tüm <p> öğelerini seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>yazilimbilisim.net</title> <style> div+p{ background-color: yellowgreen; } </style> </head> <body> <div> <p>div altında bulunan bir paragraf</p> <p>div altında bulunan bir paragraf</p> <span><p>div altında bulunan bir paragraf</p></span> </div> <p>Bu paragraf div altında değildir</p> <p>Bu paragraf div altında değildir</p> </body> </html> |
5- Kardeş Seçici (general sibling selector)
Kendinden sonra gelen tüm öğeleri seçmek için kullanılır. Seçiciler arası “~” işareti kullanılır.
Örnek
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>yazilimbilisim.net</title> <style> div~p{ background-color: yellowgreen; } </style> </head> <body> <div> <p>div altında bulunan bir paragraf</p> <p>div altında bulunan bir paragraf</p> <span><p>div altında bulunan bir paragraf</p></span> </div> <p>Bu paragraf div altında değildir</p> <p>Bu paragraf div altında değildir</p> </body> </html> |
[…] ile öğeleri seçmek için pek çok farklı yönden seçici kullanımı mevcuttur. CSS Seçicileri başlıklı yazımızda tüm bu seçicileri daha önce incelemiştik. Şimdi bunlara eklenen CSS […]
[…] CSS Seçiciler […]