Varlık ve Tam Değerler
Coddy'nin CSS Seçicileri kursunda ders 12 / 15.
Bu derste, öznitelik varlığı ve tam değer seçicileri hakkında bilgi edineceksiniz. Öznitelik seçicileri, öğeleri bir özniteliğin varlığına veya yokluğuna ya da bir özniteliğin tam değerine göre seçmek için kullanılır.
Öznitelik Varlığı Seçicisi:
Öznitelik varlığı seçicisi, değerine bakılmaksızın belirli bir özniteliğe sahip olan öğeleri hedefler. İçinde öznitelik adının bulunduğu köşeli parantezler kullanılarak gösterilir.
Örnek:
/* Selects all elements with a "target" attribute */
[target] {
color: blue;
}Tam Değer Seçicisi:
Tam değer seçicisi, belirli bir özniteliğe ve belirli bir öznitelik değerine sahip öğeleri hedefler. Öznitelik adının ardından bir eşittir işareti ve istenen değerin köşeli parantez içine yazılmasıyla gösterilir.
Örnek:
/* Selects the element with "data-type" attribute having the value "important" */
[data-type="important"] {
font-weight: bold;
}Kod Örnekleri:
HTML:
<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>CSS:
[target] {
text-decoration: underline;
}
[data-type="important"] {
color: red;
}Bu örnekler, CSS öznitelik seçicilerinin, öğeleri özniteliklerinin varlığına veya tam değerine göre seçerek ve onlara karşılık gelen stilleri uygulayarak nasıl çalıştığını göstermektedir.
Görev
KolayÖznitelik seçicileri kullanarak basit bir HTML formunu stillendirmekle görevlendirildiniz.
Öznitelik seçicileri kullanarak aşağıdaki stilleri uygulayın:
typeözniteliği "text" olarak ayarlanmış giriş alanlarınagreenbir kenarlık ekleyin.typeözniteliği "email" olarak ayarlanmış giriş alanlarının arka plan renginilightblueolarak değiştirin.typeözniteliği "password" olarak ayarlanmış giriş alanlarının metin renginiredyapın.
Kendin dene
<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
/* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS Seçicileri bölümündeki tüm dersler
4Öznitelik seçiciler
Öznitelik Seçicilere GirişVarlık ve Tam DeğerlerÖznitelik Değeri seçicileriÖznitelik Değeri seçicileri IIÖznitelik Değeri seçicileri III