Genel

FrontEnd Developer RoadMap – CSS3 Tutorial 9 CSS için Html’de Parent – Child Mantığını Anlamak

Merhabalar, bu yazımda teorik konularımızdan biri olan CSS için Html’de Parent-Child konusuna bakacağız.

Html’de etiketler belli bir hiyerarşide yazılırlar.

Örneğin <html> etiketi Html belgesi içinde  tüm etiketler için bir Parent durumundadır.

Yine Html etiketleri içinde yazılan <head> ve <body> etiketleri ise Html’in Child’larıdır. Aynı zamanda birbirleriyle de kardeştirler.

Bu bu şekilde iç içe yazabildiğimiz kadar Parent-Child-Sibling durumu yaratılarak devam eder.

CSS yazarken de belli durumlarda sadece Parent’a uygula ya da ilgili Parent’ın Child’ına uygula ya da onun Child’lardan biri Parent kabul et onun Child’larına uygula gibi seçiciler kullanarak CSS kodlarını tam olarak nereye uygulamak istersek oraya uygulayabiliriz.

Teorik olarak bu durumdan haberdar olmanız şimdilik yeterli yeri geldiğinde kodlarla olaya bakıyor olacağız.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Murat Bilginer</h1>

    <div>
        <div>
            <p></p>
            <p>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </p>
        </div>
    </div>
    
    
</body>
</html>

Bu gördüğümüz yapıda örneğin Html içindeki bütün li etiketlerine uygulamak istemediğim sadece div > div > p > ul > li ye uygulamak istediğim bir CSS olabilir.

Burada CSS’i uyguladığımızda kimlerin bundan etkileneceğini Parent-Child olayını kavradığımızda daha rahat anlıyoruz.

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 11 – Oly Melek Oldu :'( Veda…

Hüzünlü bir selam. Bu yazı dizisine başlarken büyük umutlarım vardı. Oly’nin FIP durumunu erken teşhis…

1 hafta ago

Kedimiz Oly & FIP Süreci 10 – Oly’nin PCR Sonucu Çıktı FCov Pozitif…

Selamlar, bu yazımda sizlere Oly’nin çıkan PCR sonucu ve geçtiğimiz bir haftada hastalığın genel seyrinden…

2 hafta ago

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 hafta ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 hafta ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

2 hafta ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

3 hafta ago