CSS Seçiciler (Selectors)
Selamün Aleyküm Arkadaşlar;
CSS bildirim ve seçici olmak üzere ikiye ayrılır. Bir stili uygulayabilmek için bir XHTML/HTML’de element veya elementleri seçmek gerekir.
div {
margin-left: 10px;
}
div seçici, [margin-left: 10px] ise bildirimdir. Bildirimler özellik ve değerden oluşur.
margin-left özellik; 10px ise değerdir. Değerin sonuna ; konularak diğer bildirime geçilir.
Her seçici yazıldıktan sonra { ile başlar } kapatılır. {} içinde bildirimler yer alır.
[table]
| Seçici | Açıklama | ||
|---|---|---|---|
| * | Tüm elementleri seçer. | ||
| E | Element etiketine göre seçer. div, a, p, h1 vs. | ||
| E F | E elementinin soyundan gelen F elementlerini seçer. | ||
| E > F | E elementine bağlı olan F elementlerini seçer. | ||
| E:first-child | E elementinin ilk elementini seçer. | ||
| E:link | Ziyaret edilmemiş, tıklanmamış elementleri seçer. | ||
| E:visited | Ziyaret edilmiş, tıklanmış elementleri seçer. | ||
| E:active | Elemente tıklandığı zaman çalışır. | ||
| E:hover | Elementin üzerine gelindiğinde çalışır. | ||
| E:focus | Elemente odaklanıldığında çalışır. | ||
| E[ozellikisim] | ozellikisim özelliği olan bütün elementleri seçer. Değerine bakılmaz. | ||
| E[ozellik=”deger”] | Özelliği deger kelimesine eşit olan elementleri seçer. | ||
| E[ozellik~=”deger”] | Özelliğinde deger kelimesi geçen elementleri seçer. | ||
| E[ozellik|=”deger”] | Özelliği deger-… olan elementleri seçer. | ||
| E.classisim | class özelliği classisim eşit olan ve E elementlerini seçer. | ||
| E#idisim | id özelliği idisim eşit olan ve E elementlerini seçer. | ||
[/table]
Evrensel Seçici (Universal Selector)
Evrensel seçici “*” gösterilir. Bütün elementleri seçer.
* {
color: red;
}
Element Seçici (Element Selectors)
Bir elementi etiketine göre seçmek için seçmek istediğimiz elementin etiketini yazmamız gerekir.
Örnekte h1 etiketleri seçilip font rengi kırmızı yapılmıştır.
h1 {
color: red;
}
Bir elementin içinde yer alan bir başka elementin seçmek için Ana elementin etiketini yazıp boşluk o elemente bağlı seçmek istediğimiz elementin etiketini yazarız.
Örnekte div içinde yer alan p elementlerinin yazı boyutu, rengi ve arkaplan rengi değiştirilmiştir.
div p {
font-size: 14px;
color: white;
background: #000;
}
Bir elemente bağlı olan elementleri seçmek için Bağlı olduğu element etiketi > Seçilecek Element etiketi şeklinde yazılır. (E > F)
Örnekte ul elementine bağlı olan li elementlerinin arkaplan rengi ve yazı rengi değiştirilmiştir.
ul > li {
background: #000;
color: #fff;
}
Özellik Seçicileri (Attribute Selectors)
E[attr] attr özelliği olan tüm E elementleri seçer.
E[attr=”deger”] attr özelliği deger eşit olan E elementleri seçer.
E[attr ~= “deger”] attr özelliği deger[boşluk]… olan E elementlerini seçer.
E[attr |= “deger”] attr özelliği deger-… olan E elementlerini seçer.
input[name]{
background: #000;
color: #fff;
display: block;
}
input[value="metin"]{
background: red;
color: yellow;
display: block;
}
input[value~="metin"]{
font-weight: bold;
display: block;
}
input[value|="metin"]{
border: 2px dashed yellow;
}
Sınıf Seçicisi (Class Selector)
class özelliğine göre bir elementi seçmek için .classisim kullanılır.
div.container{
border: 1px solid #000;
background: #ddd;
}
Id Seçicisi (Id Selector)
Id özelliğine göre elementleri seçebiliriz. #iddeger olarak kullanılır.
div#item1{
border: 1px dashed #ccc;
background: #fff;
font-weight: bold;
}
Pseudo-classes
E:active E elementine mouse ile tıklandığı zaman tetiklenir.
E:hover E elementinin üzerine mouse ile gelince tetiklenir.
E:link Hiç tıklanmamış, bağlı link hiç ziyaret edilmemiş E elementleri seçilir.
E:visited Tıklanmış, ziyaret edilmiş E elementleri seçilir.
E:not(seçici) E elementinin içinden not(seçicide tanımlanmış) hariç olanlar seçilir.
E:target URL sonunda #deger ile gelen E elementinin içinde, id özelliğine eşit olan seçilir.
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: black;
}
a:active{
color: orange;
}
body > *:not(div){
background: #000;
color: #fff;
}
#con:target{
color: red;
}
Pseudo-elements
E:before E elementinden önce içerik ekler.
E:after E elementinden sonra içerik ekler.
E:first-letter E elementinde ilk harfi seçer.
E:first-line E elementinde ilk satırı seçer.
E::selection E elementinde kullanıcı mouse ile alanı seçtiğinde tetiklenir. Mozilla tarayıcında çalışmaz. Mozilla tarayıcında ::-moz-selection bu kod aynı işlemi yapar.
p:before{
padding-right: 5px;
content: "P. başı";
}
p:after{
padding-left: 5px;
content: "P. sonu";
}
p:first-line{
color: red;
background: #000;
}
p:first-letter{
color: yellow;
}
p::selection{
background: green;
color: white;
}
/* Mozilla için */
p::-moz-selection{
background: green;
color: white;
}
UI state pseudo-classes
E:checked E elementinden checked veya selected özelliği olanı seçer.
E :disabled E elementinde disabled özelliği olan, inaktif elementler (form elementleri) seçilir.
E :enabled E elementinde disabled özelliği olmayan, aktif elementler (form elementleri) seçilir.
E:focus E elementine mouse veya klavye (tab ile) ile odaklanıldığında tetiklenir.
E:read-only E elementinde readonly özelliği olanlar seçilir.
E:read-write E elementinde readonly özelliği olmayanlar seçilir.
option :checked{
color: red;
background: yellow;
}
input[type="checkbox"]:checked{
margin-left: 20px;
}
input[type="radio"] :checked{
margin-left: 20px;
}
form#form1 > *:enabled{
background: red;
}
form#form1 > *:disabled{
background: lime;
}
form#form1 > *:focus{
width: 50px;
}
form#form1 > *:read-only{
background: yellow;
}
form#form1 > *:read-write{
background: orange;
}
E:valid E elementinde pattern özelliğindeki kural sağlanıyorsa tetiklenir.
E:invalid E elementinde pattern özelliğindeki kural sağlanmıyorsa tetiklenir.
Not: E:valid ve E:invalid HTML5 pattern özelliğine aittir.
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
Hayırlı günler, sağlıcakla kalın.
Bu döküman www.ibasoglu.com’a aittir. Kaynak belirtmek suretiyle alıntı yapılabilir.