Bir web sitesinin metnini ve içeriğini HTML koduyla düzenlemek, oluşturmanın yalnızca bir "parçası"dır. bir web sitesinin ön ucu. Bu sürecin bir diğer büyük parçası da görsel stilin oluşturulmasıdır. CSS kuralları.
Yeni bir web sitesi oluşturduğumuzda veya mevcut bir web sitesinde büyük düzen değişiklikleri yaptığımızda, kaçınılmaz olarak web sitemizin belirli bölümlerinin belirli bir şekilde görünmesini isteriz. Bunu yapmak için, çeşitli seçeneklerin nasıl kullanılacağını anlamak önemlidir. CSS birleştiriciler, örneğin CSS alt seçicisi. Bu CSS birleştirici, bir web sitesinin büyük bölümlerinin aynı stil değişikliklerini bir kerede almasına izin verir.
CSS Alt Seçici Nedir?
CSS alt seçicisi, dört farklı CSS birleştiricisinden biridir. İki seçici arasına tek bir boşluk ( ) eklerken, alt öğelerin aynı birinci seçiciyi paylaşması koşuluyla, aynı stil öğeleri ikinci seçiciye de uygulanacaktır.
Bir CSS alt seçicisini anlamak için önce CSS seçicilerini anlama. Bir seçiciyi tanımlamanın en iyi yolu, stil vermeye çalıştığınız HTML parçasını tanımlayan bir CSS operatörü olmasıdır. Seçici olarak adlandırılır, çünkü HTML'nin üst öğesiyle aynı operatörü paylaşan herhangi bir HTML parçasını "seçer".
Bu tür operatörlerin yaygın örnekleri şunlardır:
div
Bu, HTML'nin paragraflar ve içerik gibi şeyleri içerebilen bir bölümünü tanımlayan bir etikettir veya:
li
hangi sıralı bir listedir. Başka bir benzer etiket:
ul
Bu sırasız bir liste oluşturur. Daha karmaşık desenlere seçiciler de denir. Basitçe söylemek gerekirse, bir CSS alt seçicisi, bir web sitesine, bir seçici ortak bir ata altında "iç içe geçtiğinde" nasıl görüneceğini söyler.
İlk seçici, CSS üst öğesi veya 'ata' seçici olur ve ikinci seçici alt öğe olur. Bir dosya dizininin nasıl çalıştığını düşünün: CSS üst öğesi, kendi klasörlerini içerebilen diğer klasörleri içeren bir klasör gibidir.
Dört birleştiriciden, belirli bir CSS üst öğesinin altına yerleştirilmiş her şeyi seçen tek kişi CSS alt seçicisidir. Diğer üç birleştirici var.
- Alt seçici (tek boşluk yerine '>'), bir birleştiricide yalnızca ilk seçici tarafından atıfta bulunulan öğeleri seçer. Birinci seçici (div) ve ikinci seçici (p) ise, ata (div) olduğu sürece yalnızca (p) seçilir. Yeni bir (bölüm) altında bir paragraf oluşturulursa, aynı (div) içinde olsa bile, stil kuralları korunmaz.
- Bitişik kardeş seçici (tek boşluk yerine '+') yalnızca birleştiricideki ikinci seçiciye en yakın olan öğeyi seçer. İlk seçici (div) ve ikinci seçici (p) ise, (p)'yi kullanan ancak (div)'i kullanmayan ilk eleman seçilir.
- Genel kardeş seçici (tek boşluk yerine '~'), ikinci seçici tarafından belirtilenler dışındaki her öğeyi seçer. İlk seçici (div) ve ikinci seçici (p) ise, (p) olmayan her öğe seçilir.
Bir CSS Alt Seçicisi Neye benziyor?
Yan yana çalışan iki farklı CSS alt seçicisinin aşağıdaki örneğinde, (div) birinci birleştiricideki ilk seçici, (ul) ise ikincideki ilk seçicidir. birleştirici. Her iki CSS alt seçicisinde de (p) ikinci seçici olarak kullanılır.
Stil öğeleri (div) ve (ul) arasında farklılık gösterir, ancak (p) her iki durumda da CSS ebeveyninin özelliklerini açıkça taşır.
Neden CSS Alt Seçici Kullanmalısınız?
CSS alt seçicisinin önemini anlamak için önce CSS iç içe seçicilerini anlamak önemlidir.
Genel olarak, tüm paragraf (p) metninin varsayılan olarak kullandığı belirli boyut veya yazı tipi gibi belirli stil kurallarının tüm web sitesine uygulanmasını isteriz. Benzer şekilde, bu stil kuralları web sitesinin tamamı için değil de her bir paragraf için uygulanırsa HTML dağınık görünmeye başlayabilir.
İç içe CSS, CSS alt seçicisi gibi CSS birleştiricilerinin kullanılmasıyla mümkündür. CSS'yi bir üst seçicinin altına "yerleştirerek", bir web sitesine hızlı ve verimli bir şekilde bilgi vermek mümkündür. CSS üst öğesinin atıfta bulunduğu her senaryoda belirli bir seçicinin nasıl görünmesi gerektiği.
Yuvalanmış bir CSS seçici kullanmak, bir sitenin birden çok bölümünü aynı anda biçimlendirmek için aynı kuralları uygulamamıza olanak tanır ve HTML'mizi temiz ve bozulmamış halde tutarken daha az işle geçinmemize olanak tanır.