Css Seçiciler

Bu yazımda Css’in en önemli konularından seçiciler konusunu öğreneceğiz. Çünkü html etiketleri üzerinde Css kodlarını uygulayabilmek için öncelikle o etiketi seçmemiz gerekiyor. Şu şekilde Html etiketlerimiz olsun.

<h3>h3 etiketi</h3>
<p class="paraf1">1. paragraf</p>
<div id="box1">
<p>2. paragraf</p>
<div id="box2">
<p class="paraf1">3. paragraf</p>
</div>
</div>
<p>4. paragraf</p>
<p class="paraf1">5. paragraf</p>

<h3>h3 etiketi</h3>

<p class="paraf1">1. paragraf</p>

<p>2. paragraf</p>

<p class="paraf1">3. paragraf</p>

</div>

<p>4. paragraf</p>

<p class="paraf1">5. paragraf</p>

Gördüğünüz gibi bazı etiketlere id, bazılarına class değerleri verdim. Şimdi de sırasıyla tüm seçicileri uygulayarak öğrenelim.

1 Etiketlerin adına göre seçim yapabiliriz.

Örneğin tüm p etiketlerinin rengini kırmızı yapalım.

p {
color:red;
}

p {

color:red;

}

2 Etiketlerin id’sine göre seçim yapabiliriz. Bunu html sayfasındaki tek bir etikete stil vermek istediğimiz durumlarda kullanıyoruz. Burda dikkat etmemiz gereken konu html sayfasındaki her bir etikete bir id verebiliriz ve aynı id değerini birden fazla etiket için kullanamayız. id değerine ulaşmak için “#” işaretini kullanırız.

Örneğin id’si prf1 olan etiketin rengini kırmızı yapalım.

#prf1 {
color:red;
}

#prf1 {

color:red;

}

3 Etiketlerin class’ına göre seçim yapabiliriz. Bunu html sayfasındaki bir veya birden fazla etikete aynı anda stil vermek istediğimiz durumlarda kullanabiliriz. Bir sayfada aynı class değerinden birden fazla olabilir.class değerine ulaşmak için “.” (Nokta) işaretini kullanırız.

Örneğin class’ı paraf1 olan etiketlerin rengini kırmızı yapalım.

.paraf1 {
color:red;
}

.paraf1 {

color:red;

}

4:5 Burda dikkat etmeniz gereken yer, etiket ile class veya id arasında boşluk yok. Bitişik yazılırlar.

/* p etiketlerinden class'ı paraf1 olanlara kırmızı kenarlık verelim */
p.paraf1{
border:2px solid red;
}
/* p etiketlerinden id'si prf1 olana mavi kenarlık verelim */
p#prf1{
border:2px solid blue;
}

/* p etiketlerinden class'ı paraf1 olanlara kırmızı kenarlık verelim */

p.paraf1{

border:2px solid red;

}

/* p etiketlerinden id'si prf1 olana mavi kenarlık verelim */

p#prf1{

border:2px solid blue;

}

6:7 Burda dikkat etmeniz gereken yer, etiket ile class veya id arasında boşluk var. Ayrı yazılırlar.

/* div etiketleri içerisinde class'ı paraf1 olanlara kırmızı kenarlık verelim */
div .paraf1{
border:2px solid red;
}
/* div etiketleri içerisinde id'si prf1 olana mavi kenarlık verelim */
div #prf1{
border:2px solid blue;
}

/* div etiketleri içerisinde class'ı paraf1 olanlara kırmızı kenarlık verelim */

div .paraf1{

border:2px solid red;

}

/* div etiketleri içerisinde id'si prf1 olana mavi kenarlık verelim */

div #prf1{

border:2px solid blue;

}

8 Burda dikkat etmeniz gereken yer, id’si box1 olan etiketin tüm çocuk ve torun p etiketlerini seçiyoruz.

/* id'si box1 olan etiketin içerisindeki tüm p etiketlerine kırmızı kenarlık verelim */
#box1 p{
border:2px solid red;
}

/* id'si box1 olan etiketin içerisindeki tüm p etiketlerine kırmızı kenarlık verelim */

#box1 p{

border:2px solid red;

}

9 Burda dikkat etmeniz gereken yer, id’si box1 olan etiketin çocuk etiketlerinden p etiketlerini seçiyoruz. Yani torun p etiketleri şeçilmez.

/* id'si box1 olan etiketin tüm p çocuk etiketlerine kırmızı kenarlık verelim */
#box1 > p{
border:2px solid red;
}

/* id'si box1 olan etiketin tüm p çocuk etiketlerine kırmızı kenarlık verelim */

#box1 > p{

border:2px solid red;

}

10 Burda dikkat etmeniz gereken yer, id’si box1 olan etiketten sonra gelen kardeş etikete bakıyoruz. Yani öncesindeki kardeş p etiketini seçmez. Birde sonrasında birden fazla kardeş p etiketi varsa bile sadece ilk kardeş p etiketi seçilir.

/* id'si box1 olan etiketten sonra gelen ilk kardeş p etiketine kırmızı kenarlık verelim. */
#box1 + p{
border:2px solid red;
}

/* id'si box1 olan etiketten sonra gelen ilk kardeş p etiketine kırmızı kenarlık verelim. */

#box1 + p{

border:2px solid red;

}

11 Burda dikkat etmeniz gereken yer, id’si box1 olan etiketten sonra gelen kardeş etiketlere bakıyoruz. Yani öncesindeki kardeş p etiketlerini seçmez.

/* id'si box1 olan etiketten sonra gelen tüm kardeş p etiketlerine kırmızı kenarlık verelim. */
#box1 ~ p{
border:2px solid red;
}

/* id'si box1 olan etiketten sonra gelen tüm kardeş p etiketlerine kırmızı kenarlık verelim. */

#box1 ~ p{

border:2px solid red;

}

12 Gruplayarak stil vermek istediğimizde, aralarına virgül koyarak yazabiliriz.

/* tüm h3 ve p etiketlerine kırmızı kenarlık verelim */
h3,p{
border:2px solid red;
}

/* tüm h3 ve p etiketlerine kırmızı kenarlık verelim */

h3,p{

border:2px solid red;

}

13 Herhangi bir kriter belirlemeden tüm etiketleri seçmek için * işareti kullanılır.

/* id'si box1 olan etiketin tüm çocuk ve torun etiketlerine kırmızı kenarlık verelim. */
#box1 *{
border:2px solid red;
}

/* id'si box1 olan etiketin tüm çocuk ve torun etiketlerine kırmızı kenarlık verelim. */

#box1 *{

border:2px solid red;

}

Dikkat Bundan sonraki kısımlarda farklı html kodları üzerinden devam ediyoruz.

14:15 Burda dikkat etmeniz gereken yer, içerik kısmını content özelliği ile veriyoruz ve eklenen içerikler p etiketinin sınırları içerisine ekleniyor.

Örneğin sonuna ekleme yapılırken, p etiketi bittikten sonra yeni satıra ekleme yapılmaz. p etiketi bitmeden, içeriğinin sonuna ekleme yapılır.

<style>
/* id'si bfr olan etiketin önüne ekleme yapıp arkaplan rengi verelim */
#bfr::before{
content: 'Önüne eklendi - ';
background-color:cornflowerblue;
color:#fff;
}
/* id'si aft olan etiketin sonuna ekleme yapıp arkaplan rengi verelim */
#aft::after{
content: ' - Sonuna eklendi';
background-color:cornflowerblue;
color:#fff;
}
</style>
<p id="bfr">Tincidunt integer.</p>
<p id="aft">Tincidunt integer.</p>

<style>

/* id'si bfr olan etiketin önüne ekleme yapıp arkaplan rengi verelim */

#bfr::before{

content: 'Önüne eklendi - ';

background-color:cornflowerblue;

color:#fff;

}

/* id'si aft olan etiketin sonuna ekleme yapıp arkaplan rengi verelim */

#aft::after{

content: ' - Sonuna eklendi';

background-color:cornflowerblue;

color:#fff;

}

</style>

<p id="bfr">Tincidunt integer.</p>

<p id="aft">Tincidunt integer.</p>

16:17 Etiketlerin disabled attribute’unun varsayılan değerleri enabled’dır.

<style>
/* Class'ı .inpt olan etiketlerden disabled olanlara kırmızı renkli bir kenarlık verelim */
.inpt:disabled {
border: 4px solid red;
}
/* Class'ı .inpt olan etiketlerden enabled olanlara mavi renkli bir kenarlık verelim */
.inpt:enabled {
border: 4px solid cornflowerblue;
}
</style>
<input class="inpt" type="text" placeholder="Disabled" disabled="disabled" />
<input class="inpt" type="text" placeholder="Enabled" />

<style>

/* Class'ı .inpt olan etiketlerden disabled olanlara kırmızı renkli bir kenarlık verelim */

.inpt:disabled {

border: 4px solid red;

}

/* Class'ı .inpt olan etiketlerden enabled olanlara mavi renkli bir kenarlık verelim */

.inpt:enabled {

border: 4px solid cornflowerblue;

}

</style>

<style>
/* Class'ı .emp olan etiketlerden içerisi boş olan etiketlere genişlik, yükseklik ve arkaplan rengi verelim */
.emp:empty {
width:150px;
height:20px;
background-color: red;
}
</style>
<p class="emp"></p>
<p class="emp">Dolu p etiketi</p>

<style>

/* Class'ı .emp olan etiketlerden içerisi boş olan etiketlere genişlik, yükseklik ve arkaplan rengi verelim */

.emp:empty {

width:150px;

height:20px;

background-color: red;

}

</style>

<p class="emp">Dolu p etiketi</p>

19:20

<style>
/* p etiketlerinin içeriğinin ilk harfini 36px yapalım */
p:first-letter {
font-size: 36px;
}
/* p etiketlerinin içeriğinin ilk satırını kalın ve italik yapalım */
p:first-line {
font-weight: bold;
font-style: italic;
}
</style>
<p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac</p>
<p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac</p>

<style>

/* p etiketlerinin içeriğinin ilk harfini 36px yapalım */

p:first-letter {

font-size: 36px;

}

/* p etiketlerinin içeriğinin ilk satırını kalın ve italik yapalım */

p:first-line {

font-weight: bold;

font-style: italic;

}

</style>

<p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac</p>

21:24

<style>
/* ul içerisindeki li etiketlerinden birincisinin arkaplan rengini kırmızı yapalım */
ul li:first-child {
background-color: red;
}
/* ul içerisindeki li etiketlerinden sonuncusunun arkaplan rengini sarı yapalım */
ul li:last-child {
background-color: yellow;
}
/* ul içerisindeki li etiketlerinden 3.sünün arkaplan rengini yeşil yapalım */
ul li:nth-child(3) {
background-color: green;
}
/* ul içerisindeki li etiketlerinden sondan 3.sünün arkaplan rengini mavi yapalım */
ul li:nth-last-child(3) {
background-color: blue;
}
</style>
<ul>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
</ul>

<style>

/* ul içerisindeki li etiketlerinden birincisinin arkaplan rengini kırmızı yapalım */

ul li:first-child {

background-color: red;

}

/* ul içerisindeki li etiketlerinden sonuncusunun arkaplan rengini sarı yapalım */

ul li:last-child {

background-color: yellow;

}

/* ul içerisindeki li etiketlerinden 3.sünün arkaplan rengini yeşil yapalım */

ul li:nth-child(3) {

background-color: green;

}

/* ul içerisindeki li etiketlerinden sondan 3.sünün arkaplan rengini mavi yapalım */

ul li:nth-last-child(3) {

background-color: blue;

}

</style>

<ul>

<li>Tincidunt integer eu augue</li>

</ul>

<style>
/* odd değeri ile ul içerisindeki li etiketlerinden 1., 3., 5. olacak şekilde birer atlayarak arkaplan rengini mavi yapalım.
Burda ilk etiketten başladığına dikkat edelim */
ul li:nth-child(odd) {
background-color: cornflowerblue;
}
/* odd değeri ile ul içerisindeki li etiketlerinden 2., 4., 6. olacak şekilde birer atlayarak arkaplan rengini mavi yapalım.
Burda ikinci etiketten başladığına dikkat edelim */
ul li:nth-child(even) {
background-color: yellow;
}
</style>
<ul>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
</ul>

<style>

/* odd değeri ile ul içerisindeki li etiketlerinden 1., 3., 5. olacak şekilde birer atlayarak arkaplan rengini mavi yapalım.

Burda ilk etiketten başladığına dikkat edelim */

ul li:nth-child(odd) {

background-color: cornflowerblue;

}

/* odd değeri ile ul içerisindeki li etiketlerinden 2., 4., 6. olacak şekilde birer atlayarak arkaplan rengini mavi yapalım.

Burda ikinci etiketten başladığına dikkat edelim */

ul li:nth-child(even) {

background-color: yellow;

}

</style>

<ul>

<li>Tincidunt integer eu augue</li>

</ul>

<style>
/* 3n+1 değeri ile ul içerisindeki li etiketlerinden 1., 4., 7. olacak şekilde arkaplan rengini 
mavi yapalım.
Burda n yerine 0 dan başlayarak değer verilir ve çıkan sonuca göre seçim yapılır.
Örneğin 0 verildiğinde birinci li etiketi, 1 verildiğinde dördüncü li etiketi, 2 verildiğinde 
yedinci li etiketi olacak şekilde seçim yapılır */
ul li:nth-child(3n+1) {
background-color: cornflowerblue;
}
</style>
<ul>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
<li>Tincidunt integer eu augue</li>
</ul>

<style>

/* 3n+1 değeri ile ul içerisindeki li etiketlerinden 1., 4., 7. olacak şekilde arkaplan rengini

mavi yapalım.

Burda n yerine 0 dan başlayarak değer verilir ve çıkan sonuca göre seçim yapılır.

Örneğin 0 verildiğinde birinci li etiketi, 1 verildiğinde dördüncü li etiketi, 2 verildiğinde

yedinci li etiketi olacak şekilde seçim yapılır */

ul li:nth-child(3n+1) {

background-color: cornflowerblue;

}

</style>

<ul>

<li>Tincidunt integer eu augue</li>

</ul>

<style>
/* p etiketlerinden lang attribute'u tr olan etiketin arkaplan rengini mavi yapalım */
p:lang(tr){
background-color:cornflowerblue;
}
</style>
<p>Tincidunt integer eu augue</p>
<p lang="tr">Tincidunt integer eu augue</p>

<style>

/* p etiketlerinden lang attribute'u tr olan etiketin arkaplan rengini mavi yapalım */

p:lang(tr){

background-color:cornflowerblue;

}

</style>

<p>Tincidunt integer eu augue</p>

<p lang="tr">Tincidunt integer eu augue</p>

<style>
/* tüm p etiketlerinden id'si prf olan etiket hariç, hepsinin arkaplan rengini mavi yapalım */
p:not(#prf){
background-color:cornflowerblue;
}
</style>
<p>Tincidunt integer eu augue</p>
<p>Tincidunt integer eu augue</p>
<p id="prf">Tincidunt integer eu augue</p>
<p>Tincidunt integer eu augue</p>

<style>

/* tüm p etiketlerinden id'si prf olan etiket hariç, hepsinin arkaplan rengini mavi yapalım */

p:not(#prf){

background-color:cornflowerblue;

}

</style>

<p>Tincidunt integer eu augue</p>

<p id="prf">Tincidunt integer eu augue</p>

<p>Tincidunt integer eu augue</p>

27:28

<style>
/* input etiketlerinden required (zorunlu) olmayanların arkaplan rengini mavi yapalım */
input:optional{
background-color:cornflowerblue;
}
/* input etiketlerinden required (zorunlu) olanların arkaplan rengini yeşil yapalım */
input:required{
background-color:greenyellow;
}
</style>
<input type="text" placeholder="Zorunlu değil"/>
<br />
<input type="text" placeholder="Zorunlu Alan" required/>

<style>

/* input etiketlerinden required (zorunlu) olmayanların arkaplan rengini mavi yapalım */

input:optional{

background-color:cornflowerblue;

}

/* input etiketlerinden required (zorunlu) olanların arkaplan rengini yeşil yapalım */

input:required{

background-color:greenyellow;

}

</style>

<br />

29:30

<style>
/* input etiketlerinden yazılabilir olanların arkaplan rengini mavi yapalım */
input:-moz-read-write{
/* Firefox için */
background-color:cornflowerblue;
}
input:read-write{
background-color:cornflowerblue;
}
/* input etiketlerinden sadece okunabilir olanların arkaplan rengini mavi yapalım */
input:-moz-read-only{
/* Firefox için */
background-color:greenyellow;
}
input:read-only{
background-color:greenyellow;
}
</style>
<input type="text" placeholder="Yazılabilir Alan"/>
<br />
<input type="text" placeholder="Sadece Okunabilir Alan" readonly/>

<style>

/* input etiketlerinden yazılabilir olanların arkaplan rengini mavi yapalım */

input:-moz-read-write{

/* Firefox için */

background-color:cornflowerblue;

}

input:read-write{

background-color:cornflowerblue;

}

/* input etiketlerinden sadece okunabilir olanların arkaplan rengini mavi yapalım */

input:-moz-read-only{

/* Firefox için */

background-color:greenyellow;

}

input:read-only{

background-color:greenyellow;

}

</style>

<br />

<style>
/* :root ile html aynı etkiyi gerçekleştirir.Yani ikiside dökümanın kökünü temsil eder.*/
:root{
}
html{
}
</style>

<style>

/* :root ile html aynı etkiyi gerçekleştirir.Yani ikiside dökümanın kökünü temsil eder.*/

:root{

}

html{

}

</style>

<style>
/* input'un placeholder yazısının rengini kırmızı yapalım */
input::-webkit-input-placeholder {
color: red;
}
input::-ms-input-placeholder {
color: red;
}
input::placeholder {
color: red;
}
</style>
<input type="text" placeholder="Placeholder Yazısı" />

<style>

/* input'un placeholder yazısının rengini kırmızı yapalım */

input::-webkit-input-placeholder {

color: red;

}

input::-ms-input-placeholder {

color: red;

}

input::placeholder {

color: red;

}

</style>

33:39 Attribute seçiciler için şu html kodlarını kullanalım.

<a title="Link-1">Link 1</a>
<a href="#" target="_parent">Link 2</a>
<a href="https://www.google.com.tr/">Link 3</a>
<a href="https://www.w3schools.com/" class="link linkBtn">Link 4</a>
<br /><br />
<a id="link-5">Link 5</a>
<a id="link6">Link 6</a>
<a id="btnLink7">Link 7</a>
<a id="btnLink8">Link 8</a>
<br /><br />
<a class="css-html-js">Link 9</a>
<a class="htmlcss-js">Link 10</a>
<a class="html-jscss">Link 11</a>

Css kodlarımızda şu şekilde

<style>
a {
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-size: 24px;
}
/* a etiketlerinden title attribute'una sahip olanların arkaplan rengini mavi yapalım.
Sadece Link 1'de title attribute'u olduğu için sadece ona uygulanacaktır */
a[title]{
background-color:blue;
}
/* a etiketlerinden target attribute'unun değeri _blank olanların arkaplan rengini sarı 
yapalım.Sadece Link 2'de olduğu için ona uygulanacaktır */
a[target="_parent"]{
background-color:yellow;
}
/* a etiketlerinden href attribute'unun değeri tr/ ile bitenlerin arkaplan rengini portakal 
rengi yapalım.Sadece Link 3'de olduğu için ona uygulanacaktır.
Burda şuna dikkat edin.tr/ nin öncesiyle bitişik veya ayrı olması önemli değil.İki durumda 
da seçilir */
a[href$="tr/"]{
background-color:darkorange;
}
/* a etiketlerinden class attribute'unun değerinin içerisinde link kelimesi geçiyorsa arkaplan 
rengini yeşil yapalım.Sadece Link 4'de olduğu için ona uygulanacaktır.Burda aranan kelime 
ile diğer kelimeler arasında boşluk olmalı.Bitişik olursa olmaz */
a[class~="link"]{
background-color:green;
}
/* a etiketlerinden id attribute'unun değeri link kelimesi ile başlayanların arkaplan rengini 
kırmızı yapalım.Sadece Link 5'de olduğu için ona uygulanacaktır.Burda şuna dikkat edin.Link 
6'nın id attribute'u link ile başlıyor ama 6 rakamı ile bitişik olduğu için 
seçilmedi.Seçilmesi için bu kelimenin - ile ayrılmış olması gerekiyor */
a[id|="link"]{
background-color:red;
}
/* a etiketlerinden id attribute'unun değeri btn kelimesi ile başlayanların arkaplan rengini 
siyah yapalım.Link 7 ve Link 8'de olduğu için onlara uygulanacaktır.Burda şuna dikkat 
edin.Bir önceki örnekte - ile ayrılması gerekirken burda bitişik olsa bile seçilir */
a[id^="btn"]{
background-color:black;
}
/* a etiketlerinden class attribute'unun değerinin içerisinde css kelimesi geçiyorsa arkaplan 
rengini mor yapalım.Link 9, Link10 ve Link11'de olduğu için onlara uygulanacaktır.Burda 
aranan kelimenin başta, sonda, ortada, ayrık veya bitişik olmasının bir önemi 
yok.Aradığımız kelimeyi içermesi yeterlidir */
a[class*="css"]{
background-color:purple;
}
</style>

<style>

a {

text-decoration: none;

display: inline-block;

padding: 10px;

color: #fff;

font-size: 24px;

}

/* a etiketlerinden title attribute'una sahip olanların arkaplan rengini mavi yapalım.

Sadece Link 1'de title attribute'u olduğu için sadece ona uygulanacaktır */

a[title]{

background-color:blue;

}

/* a etiketlerinden target attribute'unun değeri _blank olanların arkaplan rengini sarı

yapalım.Sadece Link 2'de olduğu için ona uygulanacaktır */

a[target="_parent"]{

background-color:yellow;

}

/* a etiketlerinden href attribute'unun değeri tr/ ile bitenlerin arkaplan rengini portakal

rengi yapalım.Sadece Link 3'de olduğu için ona uygulanacaktır.

Burda şuna dikkat edin.tr/ nin öncesiyle bitişik veya ayrı olması önemli değil.İki durumda

da seçilir */

a[href$="tr/"]{

background-color:darkorange;

}

/* a etiketlerinden class attribute'unun değerinin içerisinde link kelimesi geçiyorsa arkaplan

rengini yeşil yapalım.Sadece Link 4'de olduğu için ona uygulanacaktır.Burda aranan kelime

ile diğer kelimeler arasında boşluk olmalı.Bitişik olursa olmaz */

a[class~="link"]{

background-color:green;

}

/* a etiketlerinden id attribute'unun değeri link kelimesi ile başlayanların arkaplan rengini

kırmızı yapalım.Sadece Link 5'de olduğu için ona uygulanacaktır.Burda şuna dikkat edin.Link

6'nın id attribute'u link ile başlıyor ama 6 rakamı ile bitişik olduğu için

seçilmedi.Seçilmesi için bu kelimenin - ile ayrılmış olması gerekiyor */

a[id|="link"]{

background-color:red;

}

/* a etiketlerinden id attribute'unun değeri btn kelimesi ile başlayanların arkaplan rengini

siyah yapalım.Link 7 ve Link 8'de olduğu için onlara uygulanacaktır.Burda şuna dikkat

edin.Bir önceki örnekte - ile ayrılması gerekirken burda bitişik olsa bile seçilir */

a[id^="btn"]{

background-color:black;

}

/* a etiketlerinden class attribute'unun değerinin içerisinde css kelimesi geçiyorsa arkaplan

rengini mor yapalım.Link 9, Link10 ve Link11'de olduğu için onlara uygulanacaktır.Burda

aranan kelimenin başta, sonda, ortada, ayrık veya bitişik olmasının bir önemi

yok.Aradığımız kelimeyi içermesi yeterlidir */

a[class*="css"]{

background-color:purple;

}

</style>

40:46

<style>
a {
border: 2px solid #fff;
background-color: cornflowerblue;
text-decoration: none;
color: #fff;
width: 130px;
display: inline-block;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 22px;
border-radius: 25px;
}
input {
padding: 10px;
font-size: 18px;
}
/* Link'in varsayılan halidir.Yani henüz link'in ziyaret edilmemiş durumu */
a:link {
background-color: cornflowerblue;
}
/* Link'in ziyaret edildikten sonraki durumu.Link bir kere ziyaret edildikten sonra, link'in arkaplan rengini yeşil yapalım */
a:visited {
background-color: green;
}
/* Fare ile link'in üzerine gelindiğindeki durumu.Linkin üzerine gelindiğinde arkaplan rengini sarı yapalım */
a:hover {
background-color: yellow;
}
/* Link'in tıklanma anındaki durumu.Link'e tıklanıldığı andaki arkaplan rengini kırmızı yapalım */
a:active {
background-color: red;
}
/* Input'un focuslanıldığındaki durumu.Focuslanıldığında mavi renkli bir kenarlık verelim */
input:focus {
border: 4px solid cornflowerblue;
}
/* Bir yazının fare ile seçildiğindeki durumu.Seçilen yazının arkaplan rengini yeşil, yazı rengini beyaz yapalım. */
textarea::-moz-selection {
/* Firefox'un eski versiyonlarının desteklemesi için */
background-color: yellowgreen;
color: #fff;
}
textarea::selection {
background-color: yellowgreen;
color: #fff;
}
/* Checkbox'ın seçili durumu.Checkbox seçildiğinde genişlik ve yükseklik değerini 50px yapalım */
input[type="checkbox"]:checked {
width: 50px;
height: 50px;
}
</style>
<h4>Fare ile link'in üzerine gelin, link'e uzunca basılı tutun ve link'e tıklayın.</h4>
<a href="#">Mehsatek</a>
<hr />
<h4>Input içerisine odaklanın.</h4>
<input type="text" placeholder="Focus" />
<hr />
<h4>Textarea'dan biraz metin seçin.</h4>
<textarea cols="30" rows="8">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</textarea>
<hr />
<h4>Checkbox'ı seçin.</h4>
<input type="checkbox" />
<hr />

<style>

a {

border: 2px solid #fff;

background-color: cornflowerblue;

text-decoration: none;

color: #fff;

width: 130px;

display: inline-block;

height: 50px;

line-height: 50px;

text-align: center;

font-size: 22px;

border-radius: 25px;

}

input {

padding: 10px;

font-size: 18px;

}

/* Link'in varsayılan halidir.Yani henüz link'in ziyaret edilmemiş durumu */

a:link {

background-color: cornflowerblue;

}

/* Link'in ziyaret edildikten sonraki durumu.Link bir kere ziyaret edildikten sonra, link'in arkaplan rengini yeşil yapalım */

a:visited {

background-color: green;

}

/* Fare ile link'in üzerine gelindiğindeki durumu.Linkin üzerine gelindiğinde arkaplan rengini sarı yapalım */

a:hover {

background-color: yellow;

}

/* Link'in tıklanma anındaki durumu.Link'e tıklanıldığı andaki arkaplan rengini kırmızı yapalım */

a:active {

background-color: red;

}

/* Input'un focuslanıldığındaki durumu.Focuslanıldığında mavi renkli bir kenarlık verelim */

input:focus {

border: 4px solid cornflowerblue;

}

/* Bir yazının fare ile seçildiğindeki durumu.Seçilen yazının arkaplan rengini yeşil, yazı rengini beyaz yapalım. */

textarea::-moz-selection {

/* Firefox'un eski versiyonlarının desteklemesi için */

background-color: yellowgreen;

color: #fff;

}

textarea::selection {

background-color: yellowgreen;

color: #fff;

}

/* Checkbox'ın seçili durumu.Checkbox seçildiğinde genişlik ve yükseklik değerini 50px yapalım */

input[type="checkbox"]:checked {

width: 50px;

height: 50px;

}

</style>

<h4>Fare ile link'in üzerine gelin, link'e uzunca basılı tutun ve link'e tıklayın.</h4>

<a href="#">Mehsatek</a>

<hr />

<h4>Input içerisine odaklanın.</h4>

<hr />

<h4>Textarea'dan biraz metin seçin.</h4>

<textarea cols="30" rows="8">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</textarea>

<hr />

<h4>Checkbox'ı seçin.</h4>

<hr />

47:50

<style>
input {
padding: 10px;
font-size: 18px;
}
/* Type'ı email olan input etiketimizin value'su valid ise yani doğru girilmişse yeşil bir kenarlık verelim */
input#vld-invld:valid{
border:4px solid green;
}
/* Type'ı email olan input etiketimizin value'su Invalid ise yani doğru girilmemişse kırmızı bir kenarlık verelim */
input#vld-invld:invalid{
border:4px solid red;
}
/* Type'ı number olan input'a min="1" ve max="10" attribute'larını verelim.
Eğer bu aralıkta değerler girilirse yeşil renkli bir kenarlık verelim */
input#range:in-range{
border:4px solid green;
}
/* Type'ı number olan input'a min="1" ve max="10" attribute'larını verelim.
Eğer bu aralıkta değerler girilmezse kırmızı renkli bir kenarlık verelim */
input#range:out-of-range{
border:4px solid red;
}
</style>
<h4>Geçerli ve geçersiz birer email adresi giriniz.</h4>
<input id="vld-invld" type="email" placeholder="Valid Invalid" />
<hr />
<h4>1 ile 10 arasında olmayan bir değer giriniz.</h4>
<input id="range" type="number" min="1" max="10"/>
<hr />

<style>

input {

padding: 10px;

font-size: 18px;

}

/* Type'ı email olan input etiketimizin value'su valid ise yani doğru girilmişse yeşil bir kenarlık verelim */

input#vld-invld:valid{

border:4px solid green;

}

/* Type'ı email olan input etiketimizin value'su Invalid ise yani doğru girilmemişse kırmızı bir kenarlık verelim */

input#vld-invld:invalid{

border:4px solid red;

}

/* Type'ı number olan input'a min="1" ve max="10" attribute'larını verelim.

Eğer bu aralıkta değerler girilirse yeşil renkli bir kenarlık verelim */

input#range:in-range{

border:4px solid green;

}

/* Type'ı number olan input'a min="1" ve max="10" attribute'larını verelim.

Eğer bu aralıkta değerler girilmezse kırmızı renkli bir kenarlık verelim */

input#range:out-of-range{

border:4px solid red;

}

</style>

<h4>Geçerli ve geçersiz birer email adresi giriniz.</h4>

<hr />

<h4>1 ile 10 arasında olmayan bir değer giriniz.</h4>

<hr />

<style>
a{
padding:5px;
}
/* Linklere tıkladığımızda href değerlerine göre ilgili id'ye sahip etikete gidilecektir.
Bu p etiketlerinden hangisi hedef olarak seçilirse arkaplan rengini mavi yapalım */
p:target {
background-color: cornflowerblue;
color:#fff;
padding:10px;
}
</style>
<h4>Linklere tıklayınız.</h4>
<a href="#p1">Birinci paragrafa git</a>
<a href="#p2">İkinci paragrafa git</a>
<p id="p1"><b>Birinci paragraf</b></p>
<p id="p2"><b>İkinci paragraf</b></p>

<style>

padding:5px;

}

/* Linklere tıkladığımızda href değerlerine göre ilgili id'ye sahip etikete gidilecektir.

Bu p etiketlerinden hangisi hedef olarak seçilirse arkaplan rengini mavi yapalım */

p:target {

background-color: cornflowerblue;

color:#fff;

padding:10px;

}

</style>

<h4>Linklere tıklayınız.</h4>

<a href="#p1">Birinci paragrafa git</a>

<a href="#p2">İkinci paragrafa git</a>

<p id="p1"><b>Birinci paragraf</b></p>

<p id="p2"><b>İkinci paragraf</b></p>

Son olarak şunu da belirtelim. Yazdığımız css kodları uygulanırken bazı öncelik durumları vardır.

Css kodlarının uygulanmasındaki öncelik şu şekildedir;

► id seçicisi

► class seçicisi

► etiket seçicisi

Yani bir etikete önce class değerine göre css kodu yazdığımızı varsayalım. Sonra da etiketine göre seçip css kodu yazalım. Normalde etikete göre seçip yazdığımız kodların etkin olmasını bekleriz ama öyle olmayacaktır. Çünkü class seçicisi, etiket seçicisini bastıracaktır.

Kodlar ve ekran görüntüsü şu şekilde;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.paragraf{
color:red;
}
p{
color:yellow;
}
</style>
</head>
<body>
<p class="paragraf">Tincidunt integer eu augue augue nunc elit dolor.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.paragraf{

color:red;

}

color:yellow;

}

</style>

</head>

<body>

<p class="paragraf">Tincidunt integer eu augue augue nunc elit dolor.</p>

</body>

</html>

Bu konunun daha iyi anlaşılabilmesi için bol bol pratik yapmalısınız. Bir Html sayfası oluşturup, seçiciler yardımıyla Css kodlarını uygulayarak değişimleri gözlemlerseniz çok daha hızlı ve kalıcı bir şekilde öğrenmiş olursunuz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın