v2.1.1
Giri┼č yap

CSS Nitelik Se├žicisi

Etiketleri niteli─čine g├Âre se├žme i┼člemi i├žin bu se├žicileri kullan─▒yoruz. S─▒ras─▒yla neler bir bakal─▒m;

[nitelik] Se├žicisi

Bu se├žici, etikette nitelik olup olmad─▒─č─▒na bak─▒yor. Olanlar─▒ se├žiyor. ├ľrne─čin title niteli─či olan t├╝m etiketleri se├žmek isteseydim;

[title] {
    color: red;
}

Ya da ├Ârne─čin target niteli─či olan a etiketlerini se├žmek isteseydim;

a[target] {
    color: green;
}

[nitelik="de─čer"] Se├žicisi

Bir ├Ânceki se├žiciden farkl─▒ olarak, niteli─čin de─čerine e┼čit etiketleri se├žmek i├žin kullan─▒l─▒r. ├ľrne─čin a etiketinde target niteli─či _blank olanlar─▒ se├žmek istersek;

a[target="_blank"] {
    color: red;
}

[nitelik~="de─čer"] Se├žicisi

Nitelik i├žinde belirtilen de─čer ge├žen etiketleri se├žmek i├žin kullan─▒l─▒r. ├ľrne─čin ┼č├Âyle bir html olsun;

<div class="box box-lg">kutu 1</div>
<div class="box-lg box">kutu 2</div>
<div class="box-lg">kutu 3</div>

Ve class niteli─činde box ge├žen etiketleri se├žmek i├žin ┼č├Âyle yazabiliriz;

[class~="box"] {
    background-color: yellow;
}

Sonu├ž;

kutu 1
kutu 2
kutu 3

G├Ârd├╝─č├╝n├╝z gibi son etiketi se├žmedi zira box de─čil box-lg ifadesi var.

[nitelik|="de─čer"] Se├žicisi

Nitelik belirtilen de─čerle ba┼člayan etiketleri se├žer. Ancak burada ├Ânemli olan, belirtilen de─čerin t├╝m kelimeyle e┼čle┼čiyor olmas─▒d─▒r. Ya t├╝m kelimeyle ya da tire i┼čareti ile ayr─▒lm─▒┼č kelimenin ba┼člang─▒c─▒ ile e┼čle┼čiyor olmas─▒ gerekir. ├ľrne─čin html yap─▒m─▒z ┼č├Âyle olsun;

<div class="box-sm">kutu 1</div>
<div class="box-lg">kutu 2</div>
<div class="boxlg">kutu 3</div>

Ve box ile ba┼člayan etiketleri se├žecek olsayd─▒k;

[class|="box"] {
    background-color: yellow;
}

Sonu├ž olarak en alttaki hari├ž di─čerlerini se├žmi┼č olacakt─▒k. ├ç├╝nk├╝ en alttaki ba┼člang─▒├ž olarak t├╝m kelimeyi baz ald─▒─č─▒m─▒zda box de─čil boxlg oldu─ču i├žin. Ayr─▒ca bo┼čluk ile ayr─▒lm─▒┼č nitelik de─čerlerinde de bu se├žici i┼če yaramaz. Yani ba┼člang─▒├ž─▒ se├žti─čimiz de─čer bile olsa bo┼čluk varsa o etiketi se├žmeyecektir.

kutu 1
kutu 2
kutu 3

[nitelik^="de─čer"] Se├žicisi

Yukar─▒daki se├žicinin aksine belirtilen de─čer ile ba┼člayan t├╝m etiketleri se├žmek i├žin kullan─▒l─▒r. Bo┼čluk tire i┼čareti vs. hi├žbirine bakmaz. Tek bakt─▒─č─▒, niteli─čin de─čeri belirlenen de─čerle ba┼čl─▒yor mu ba┼člam─▒yor mu? Yine ayn─▒ yap─▒da bir html yap─▒m─▒z olsayd─▒;

<div class="box box-sm">kutu 1</div>
<div class="box-lg">kutu 2</div>
<div class="boxlg">kutu 3</div>

Ve ┼ču ┼čekilde se├žme i┼člemi yapsayd─▒k;

[class^="box"] {
    background-color: yellow;
}

Sonu├ž, hepsini se├žecektir.

kutu 1
kutu 2
kutu 3

[nitelik$="de─čer"] Se├žicisi

Bir ├╝stteki se├žicinin tam tersi olarak, niteli─či belirtilen de─čerle biten t├╝m etiketleri se├žmemizi sa─čl─▒yor. ├ľrne─čin html yap─▒m─▒z ┼č├Âyle olsun;

<div class="box-lg box">kutu 1</div>
<div class="bbox">kutu 2</div>
<div class="lg-box">kutu 3</div>
<div class="kutu">kutu 4</div>

┼×imdi class niteli─či box ile biten etiketleri se├želim.

[class$="box"] {
    background-color: yellow;
}

Sonu├ž ise, son div hari├ž hepsini se├žecektir.

kutu 1
kutu 2
kutu 3
kutu 4

[nitelik*="de─čer"] Se├žicisi

Sonu ve ba┼člang─▒c─▒ belirledi─čimiz de─čer ile bitenleri se├žmeyi ba┼čard─▒k. Bu se├žici ile, niteliklerde belirledi─čimiz de─čer ge├žen t├╝m etiketleri se├žmek i├žin kullan─▒l─▒yor.

<div class="box">kutu 1</div>
<div class="tox">kutu 1</div>
<div class="hoxxx">kutu 1</div>

┼×imdi class niteli─či i├žerisinde ox de─čeri ge├žen etiketleri se├želim.

[class*="ox"] {
    background-color: yellow;
}
kutu 1
kutu 1
kutu 1

G├Ârd├╝─č├╝n├╝z gibi ox de─čeri hepsinde ge├žti─či i├žin t├╝m etiketleri se├žtik.

tayfunerbilen
251 g├╝n ├Ânce yazd─▒.
├ľnceki Kullan─▒m─▒ Sonraki Gradient Kullan─▒m─▒