CSS2 ve CSS3 PSEUDO SEÇİCİLERİ

Tarhi : 09-05-2017 05:48:36 | Yazar : ÇAĞLAR BOSTANCI

CSS2 ve CSS3 PSEUDO SEÇİCİLERİ

IE 7 kısman IE 8 ve sonrası tam destekkliyor.

SINIF :AÇIKLAMA
E:active :E için aktif bir link rengi tanımlar
E:focus :E için fare hareketine odaklamayı sağlar.
E:hover :E nin fare üzerine gelmesi ayrılması durumu.
E:lang() :E için dil kuralları sağlar.
E:link :E için açılmamış bir linkin rengini tanımlar.
E:visited :E için açılmış bir linkin rengini tanımlar.
E:first-child :E nin ilk çocuk bağını seçer.

Etkileşim Sınıflar

a:hover= Atandığı elementin fare ile olan etkileşiminde devreye girmektedir.
a:active= Aktif bir link rengi tanımlar.
a:focus = Atandığı element için fare hareketine odaklanmayı sağlar.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>pseudo-sınıfları</title>
        <style>
		.sss p{ display:none;}
        .sss a:link{ color: #F00;}
		.sss a:visited{ color:#0F0;}
		.sss a:active{ color:#F0F;}
		.sss a:active + p{ display:block;}
		.sss [type="text"]:focus + p{ display:block;}
		.sss a:hover{ font-size:24px;}
		.sss [type="text"]:focus{ width:20%}
		.sss [type="submit"]:focus{ width:200px;}
		p:lang(tr){ background:#C00;}
		p:lang(en){ background:#960;}
		
        </style>
    </head>
    <body>
    
    <div class="sss">
    	<a href=""><strong>link</strong></a><br>
        <a href="#"><strong>link</strong></a><br>
        <a href="https://www.ddd.com.tr"><strong>link</strong></a><br>
        <input type="text" name="odaklanama">
        <p>Lütfen adınızı soyadınızı giriniz.</p>
        <input type="submit" name="cek">
        </div>
    <p lang="tr">MERHABA DÜNYA</p>
    <p lang="en">HELLO WORD</p>
            </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>pseudo-sınıfları</title>

<style>

.sss p{ display:none;}

.sss a:link{ color: #F00;}

.sss a:visited{ color:#0F0;}

.sss a:active{ color:#F0F;}

.sss a:active + p{ display:block;}

.sss [type="text"]:focus + p{ display:block;}

.sss a:hover{ font-size:24px;}

.sss [type="text"]:focus{ width:20%}

.sss [type="submit"]:focus{ width:200px;}

p:lang(tr){ background:#C00;}

p:lang(en){ background:#960;}

</style>

</head>

<body>

<p>Lütfen adınızı soyadınızı giriniz.</p>

</div>

<p lang="tr">MERHABA DÜNYA</p>

<p lang="en">HELLO WORD</p>

</body>

</html>

CSS3 Pseudo Sınıfları

E:root :Belgenin kök elemanı. HTML belgesinin kök elemanı her zaman html belgesidir.
E:nth-child(n) :Herhangi bir E elementinin n’inci çocuk(child) bağını seçer.
E:nth-last-child(n) :Herhangi bir E elementin sonundan başlayarak n’inci çocuğunu seçer.
E:nth-of-type(n) :Herhangi bir E elementinin birinci kardeşinden başlayarak n’inci olanı seçer.
E:nth-last-of-type(n) :Herhangi bir E elementin sonuncu kardeşinde başlayarak n’inci elemanını seçer.
E:first-child :Herhangi bir E elementin ilk çocuk(child) elementinin üstü(parent) ise.
E:last-child :Herhangi bir E elementin en son çocuk elementin üstü parent ise.
E:first-of-type :Herhangi bir E elementi kardeş (sibling) elementinin ilki ise.
E:last-of-type :Herhangi bir E elementi kardeş (sibling) elementinin sonuncusu ise.
E:only-child :Herhangi bir E elementin çocuk elementinin üstü parent ise.
E:only-of-child :Herhangi bir E elementin kardeş (sibling) elementi var ise.
E:empty :Elementi çocuk element değilse text bağı içeriyorsa.
E:target :Elementin target özelliği referer bir adres ise. Çapa türü linkler.
E:enabled :Kullanıcı arabirim öğelerinden herhangi birisinin ulaşılabilir olup olmadığını saptar.
E:disabled :Kullanıcı arabirimi öğelerinden herhangi birisinin kapalı olup olmadığını saptar.
E:checked :Kullanıcı E elementine tik koymuşsa.
E:selection :E elementi kullanıcı tarafından seçilmişse.
E:not(s) :E elementin bağında s değilse.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>pseudo-sınıfları</title>
        <style>
		.pseudo p:nth-child(2){ color:green;}/*Belirtilen çocuk elementi seçer.*/
		.pseudo p:nth-last-child(2){ color:red;}/*Sondan başlayarak istenilen çocuk elementi seçer.*/
		p:nth-of-type(3){ color:blue;}/*p elementinin 3. kardeşini seçer*/
		p:nth-of-type(odd){ background:#060;}/*Sıra numarası tek rakamların arkaplan rengini değiştirir.*/
		p:nth-of-type(even){ background-color:#0F9;}/*Sıra nurası çift rakam olanlar seçilir.*/
		p:nth-of-type(3n){ font-size:24px;}/*3*n sırasında olanların font büyüklüğünü artıracak.*/
		h3:nth-last-of-type(2){ font-weight:bold; font-size:36px;}/*nth-of-type özelliği ile yanı işleve sehip indek olarak sondan başlar.*/
		.pseudo >:first-child{ width:200px;}/*.pseudo clasının ilk çocuğunun boyutunu değiştirir.*/
		.pseudo p:first-child{ height:100px;}/*.pseudo clasının ilk çocuğu p ise yüksekliğini değiştirir.*/
		.pseudo >:last-child{ width:200px;}/*.pseudo clasının son çocuğunun boyutunu değiştirir.*/
		.pseudo p:last-child{ height:100px;}/*.pseudo clasının son çocuğu p ise yüksekliğini değiştirir.*/
		p:first-of-type{ border:2px solid #00F;}/*Seçici olarak ilk bağı seçer p etiketinden ilkini seçmiştir.*/
		p:last-of-type{ border:2px solid #900;}/*Seçici olarak son bağı seçer p etiketinden en sonunu seçmiştir.*/
		p:only-of-type{ width:100%; height:2em; background:#CC0;}/*Bir elementin tek çocuk bağı varsa onu seçer.*/
		.capa{ display:none;}
		.capa:target{ display:block; background:#CCC;}/*Html deki çapa işlemi gibi kullanılmaktadır.*/
		input:disabled{ background:#066;}
		input:enabled{ background:#ccc;}
		input:checked{ background:#F00; width:40px;}
		label{ background:#0C6;}
		label+[type="text"]{ background:#069;}
        </style>
    </head>
    <body>
    <h3>Başlık 1</h3>
    <div class="pseudo">
    	<p>ELEMENT 1</p>
        <p>ELEMENT 2</p>
        <p>ELEMENT 3</p>
        <p>ELEMENT 4</p>
        <p>ELEMENT 5</p>
        <p>ELEMENT 6</p>
        <p>ELEMENT 7</p>
        <p>ELEMENT 8</p>
        <p>ELEMENT 9</p>
   	</div>
    <div><p>TEK ÇOCUK</p></div>
   <h3>Başlık 2</h3>
   <a href="#capa1">ÇAPA 1 AÇ</a> || <a href="#capa2">ÇAPA 2 AÇ</a>
   <div id="capa1" class="capa">ÇAPA 1 DİV</div>
   <div id="capa2"  class="capa">ÇAPA 2 DİV</div>
   <label for="seclab">SEÇ 1</label>
   <input type="text" name="metin1" enabled><br/>
   <input type="text" name="metin2" disabled><br/>
   <input type="text" name="metin3"><br/>
   <input type="checkbox" name="cek" checked>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>pseudo-sınıfları</title>

<style>

.pseudo p:nth-child(2){ color:green;}/*Belirtilen çocuk elementi seçer.*/

.pseudo p:nth-last-child(2){ color:red;}/*Sondan başlayarak istenilen çocuk elementi seçer.*/

p:nth-of-type(3){ color:blue;}/*p elementinin 3. kardeşini seçer*/

p:nth-of-type(odd){ background:#060;}/*Sıra numarası tek rakamların arkaplan rengini değiştirir.*/

p:nth-of-type(even){ background-color:#0F9;}/*Sıra nurası çift rakam olanlar seçilir.*/

p:nth-of-type(3n){ font-size:24px;}/*3*n sırasında olanların font büyüklüğünü artıracak.*/

h3:nth-last-of-type(2){ font-weight:bold; font-size:36px;}/*nth-of-type özelliği ile yanı işleve sehip indek olarak sondan başlar.*/

.pseudo >:first-child{ width:200px;}/*.pseudo clasının ilk çocuğunun boyutunu değiştirir.*/

.pseudo p:first-child{ height:100px;}/*.pseudo clasının ilk çocuğu p ise yüksekliğini değiştirir.*/

.pseudo >:last-child{ width:200px;}/*.pseudo clasının son çocuğunun boyutunu değiştirir.*/

.pseudo p:last-child{ height:100px;}/*.pseudo clasının son çocuğu p ise yüksekliğini değiştirir.*/

p:first-of-type{ border:2px solid #00F;}/*Seçici olarak ilk bağı seçer p etiketinden ilkini seçmiştir.*/

p:last-of-type{ border:2px solid #900;}/*Seçici olarak son bağı seçer p etiketinden en sonunu seçmiştir.*/

p:only-of-type{ width:100%; height:2em; background:#CC0;}/*Bir elementin tek çocuk bağı varsa onu seçer.*/

.capa{ display:none;}

.capa:target{ display:block; background:#CCC;}/*Html deki çapa işlemi gibi kullanılmaktadır.*/

input:disabled{ background:#066;}

input:enabled{ background:#ccc;}

input:checked{ background:#F00; width:40px;}

label{ background:#0C6;}

label+[type="text"]{ background:#069;}

</style>

</head>

<body>

<h3>Başlık 1</h3>

<p>ELEMENT 1</p>

<p>ELEMENT 2</p>

<p>ELEMENT 3</p>

<p>ELEMENT 4</p>

<p>ELEMENT 5</p>

<p>ELEMENT 6</p>

<p>ELEMENT 7</p>

<p>ELEMENT 8</p>

<p>ELEMENT 9</p>

</div>

<div><p>TEK ÇOCUK</p></div>

<h3>Başlık 2</h3>

</body>

</html>

pseudo Elementler

Pseudo elementleri kavramı, belge içinde daha fazla gerçekte olmayan soyutlanmış ama var olan HTML elementleri gibi davranan özellikleri kullanmak için oluşturulmuştur.

E:firts-line : E için ilk satırı seçer.
E:first-letter : E için ilk karakteri seçer.
E:before : E içeriğininden öncesini seçer.
E:after : E içeriğinden sonrasını seçer.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>pseudo-sınıfları</title>
        <style>
			p:first-line{ font-size:24px;}/*Parağrafın ilk satırını seçer.*/
			p:first-letter{ font-size: 36px; color:#03F;}
			div:before{
				content:"METİN SONRASI";
				border:1px solid #060;
				padding:5px;
				display:block;
				background:#CCC;
				}
			div:after{
				content:"METİN ÖNCESİ";
				border:1px solid #0F0;
				padding:5px;
				display:block;
				background:#9F0;
				}
			div ul{ list-style:none;}
			div li:before{ content:"\2709";}
			div li:after{ content:"\2714";}
        </style>
    </head>
    <body>
		<p>Çağlar BOSTANCI deneme içerik,<br/>
        İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer.<br/>
        </p>
        <div>
        	METİN İÇERİĞİ BURADA
            <ul>
            	<li> içerik</li>
            </ul>
        </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>pseudo-sınıfları</title>

<style>

p:first-line{ font-size:24px;}/*Parağrafın ilk satırını seçer.*/

p:first-letter{ font-size: 36px; color:#03F;}

div:before{

content:"METİN SONRASI";

border:1px solid #060;

padding:5px;

display:block;

background:#CCC;

}

div:after{

content:"METİN ÖNCESİ";

border:1px solid #0F0;

padding:5px;

display:block;

background:#9F0;

}

div ul{ list-style:none;}

div li:before{ content:"\2709";}

div li:after{ content:"\2714";}

</style>

</head>

<body>

<p>Çağlar BOSTANCI deneme içerik,<br/>

İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer<br/>İçeriğin ilk satırını seçer.<br/>

</p>

<div>

METİN İÇERİĞİ BURADA

<ul>

<li> içerik</li>

</ul>

</div>

</body>

</html>

icon kodları
çek 1:\2713
çek 2:\2714
çarpı:\2717
yıldız:\2603
kardanadam:\2603
dönüşüm:\267B
small:\263A
eposta:\2709
işaretparmağı:\261D
üzgünsurat:\2639
at:\2658
kalp:\2665

İlgili

CSS

CSS2 ve CSS3 PSEUDO SEÇİCİLERİ

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

CSS2 ve CSS3 PSEUDO SEÇİCİLERİ