CSS birleştiricileri, iki seçici arasındaki ilişkiyi tanımlar. CSS seçicileri, stil oluşturmak için öğeleri seçmek üzere kullanılan kalıplardır.
Bir CSS seçicisi, birleştiriciler kullanılarak birbirine bağlanan birden fazla seçiciden oluşan basit veya karmaşık olabilir.
Bu birleştiricileri anlamak, CSS'de hassas ve etkili stil oluşturmak için çok önemlidir.
CSS Kombinatörlerinin Türleri
Genel kardeş seçici, belirtilen bir öğeyi takip eden ve aynı üst öğeyi paylaşan öğeleri seçer. Bu, aynı üst öğeye sahip öğe gruplarını seçmek için yararlı olabilir.
html:
Bitişik kardeş seçici, belirtilen öğenin hemen yanındaki öğeyi seçer. Bu seçici yalnızca bir sonraki kardeş öğeyi seçer.
HTML:
Çocuk seçici, belirtilen bir öğenin doğrudan alt öğelerini seçer. Bu birleştirici, yalnızca doğrudan alt öğeleri seçtiği için alt öğe seçicisinden daha katıdır.
HTML:
Alt öğe seçici, belirtilen bir öğenin alt öğeleri olan tüm öğeleri seçer. Bu öğeler, belirtilen öğenin herhangi bir düzeyinde olabilir.
HTML:
CSS birleştiricilerini anlamak ve etkili bir şekilde kullanmak, web sayfalarını hassas bir şekilde biçimlendirme becerinizi büyük ölçüde geliştirebilir.
Her birleştirici benzersiz bir amaca hizmet eder ve HTML yapısındaki ilişkilerine göre öğeleri hedeflemek için kullanılabilir.
Bu birleştiricilerde ustalaşmak, karmaşık ve iyi yapılandırılmış stil sayfaları oluşturmak isteyen her web geliştiricisi için olmazsa olmazdır.
Bir CSS seçicisi, birleştiriciler kullanılarak birbirine bağlanan birden fazla seçiciden oluşan basit veya karmaşık olabilir.
Bu birleştiricileri anlamak, CSS'de hassas ve etkili stil oluşturmak için çok önemlidir.
CSS Kombinatörlerinin Türleri
1. General Sibling selector(~) (Genel Kardeş seçici)
Genel kardeş seçici, belirtilen bir öğeyi takip eden ve aynı üst öğeyi paylaşan öğeleri seçer. Bu, aynı üst öğeye sahip öğe gruplarını seçmek için yararlı olabilir.
html:
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Adjacent sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>Bitişik kardeş seçici olgunlaşmaya yardımcı olurken, aynı anahtar kelimeye sahip iki elemanın yan yana gelmesini kontrol altında tutarız.
Bitişik kardeş seçici, belirtilen öğenin hemen yanındaki öğeyi seçer. Bu seçici yalnızca bir sonraki kardeş öğeyi seçer.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Adjacent sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
3. Child Selector(>) (Çocuk Seçici)
Çocuk seçici, belirtilen bir öğenin doğrudan alt öğelerini seçer. Bu birleştirici, yalnızca doğrudan alt öğeleri seçtiği için alt öğe seçicisinden daha katıdır.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div > p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Child selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
4. Descendant selector(space) (Soy ağacı seçici)
Alt öğe seçici, belirtilen bir öğenin alt öğeleri olan tüm öğeleri seçer. Bu öğeler, belirtilen öğenin herhangi bir düzeyinde olabilir.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Descendant selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
<p>Descendant selector</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>CSS birleştiricilerini anlamak ve etkili bir şekilde kullanmak, web sayfalarını hassas bir şekilde biçimlendirme becerinizi büyük ölçüde geliştirebilir.
Her birleştirici benzersiz bir amaca hizmet eder ve HTML yapısındaki ilişkilerine göre öğeleri hedeflemek için kullanılabilir.
Bu birleştiricilerde ustalaşmak, karmaşık ve iyi yapılandırılmış stil sayfaları oluşturmak isteyen her web geliştiricisi için olmazsa olmazdır.
