ID Seçici

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 13 / 76.

ID seçici, bir HTML öğesini id özniteliğinin değerine göre hedeflemek için kullanılır. Birden fazla öğeyi stillendirmek için kullanılabilen sınıf seçicilerin aksine, ID seçiciler benzersizdir ve bir sayfada yalnızca tek bir öğeye uygulanabilir. Bu, onları başka hiçbir öğeye uygulanmaması gereken belirli stillere sahip bireysel öğeleri stillendirmek için kullanışlı kılar.

CSS'inizde belirli bir ID'ye sahip bir öğeyi hedeflemek için, ID değerinden önce bir diyez sembolü (#) kullanırsınız. İşte bir ID seçici kullanmak için temel sözdizimi:

#idname {
    property: value;
}

Örneğin:

#intro {
    color: blue;
    font-size: 20px;
}

Bu örnekte, #intro ID seçicisi, "intro" ID'sine sahip öğeyi hedefler. Bildirimler, bu öğe için metin rengini maviye ve yazı tipi boyutunu 20 piksele ayarlar.

Görev

Kolay

Bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) dahil olmak üzere çeşitli öğeler içeren bir HTML belgesi size verilmiştir. Göreviniz, bir bölüm öğesini stillendirmek için bir ID seçicisi kullanmaktır. Aşağıdaki adımları izleyin:

<div> öğesine "special" değerine sahip bir id özniteliği ekleyin.
"special" ID'sine sahip öğeyi hedefleyen bir ID seçicisi kullanarak bir CSS kuralı yazın. Bu öğenin arka plan rengini yellow ve metin rengini red olarak ayarlayın.

Kopya kağıdı

ID seçicisi, id özniteliğini kullanarak belirli bir HTML öğesini hedefler. ID seçicileri benzersizdir ve bir sayfada yalnızca tek bir öğeye uygulanabilir.

Bir diyez sembolü (#) ve ardından ID değerini kullanın:

#idname {
    property: value;
}

Örnek:

#intro {
    color: blue;
    font-size: 20px;
}

Kendin dene

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>