CSS: Seçiciler (11 ~ 20)

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

  • X[Y=’Z’]
  • X[Y*=’Z’]
  • X[Y^=’Z’]
  • X[Y$=’Z’]
  • X[Y~=’Z’]
  • X:checked
  • X::before ve X::after
  • X:hover
  • X:not(Y)
  • X::first-letter ve X::first-line

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.

/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.

/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.

/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.

/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.

/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.

/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.

/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

CSS: Seçiciler (1 ~ 10)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

  • * (Evrensel Seçici)
  • #X (ID “Tekil” Seçici)
  • .X (Sınıf Seçici)
  • X Y (Torun Seçici)
  • X (Basit Seçici)
  • X:link ve X:visited (Sözde Sınıf Seçicileri)
  • X + Y (Bitişik Seçici)
  • X > Y (Çocuk Seçici)
  • X ~ Y
  • X[Y] (Nitelik Seçici)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır.

/*
 * tüm nesneleri seçer ve rengini kırmızı yapar
 */
* {
     color: red
}

.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..

/*
 * divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.erbilen * {
     text-decoration: underline
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#erbilen {
     color: red
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
 */
a.erbilen {
     color: blue
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.

/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visitedseçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.

/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.

/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.

/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

(11~20) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

CSS: Giriş

İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;

  • CSS Nedir?
  • CSS Dosyası Nasıl Oluşturulur?
  • CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
  • HTML Sayfasında Inline CSS Nasıl Yazılır?
  • CSS’in Genel Yapısı
  • CSS’de Açıklama Satırı
  • CSS Hataları Hakkında
Okumaya devam et “CSS: Giriş”

Özel radio ve checkbox Butonları Hazırlamak (css/jquery)

Çoğu zaman css’e döktüğümüz tasarımlarda özel radio ve checkbox butonları olmakta. Buda bizim işimizi zorlaştırmakta.. En azından bir çoğumuzun diyelim 🙂 Hal böyle olunca bu checkbox ve radio butonlarını nasıl özelleştirebiliriz, kendimize göre düzenleyebiliriz bunu sizlere göstermek istedim.. Yararlı olması dileğiyle..

Kaynak Dosyalar

İndirmek İçin Tıklayın

Düzeltme;

radio ve checkbox’ları bir arada kullanabilmek için label’lere class atamamız gerekiyor.. Label içinde checkbox varsa class’ı checkbox, radio ise class’ı radio yaptıktan sonra css dosyalarındaki kodlarıda buna göre düzenlerseniz sorun düzelecektir.. İndireceğiniz örnek dosyalarda ben bu işlemi yaptım, inceleyebilirsiniz.

Css’de gt ve lt seçicileri

Normal şartlarda jquery’de olan gt ve lt seçicileri css’de bulunmuyor.. Ancak css kullanarakta bu işlemleri yapmamız mümkün.. Bu yazımda sizlere bunu göstereceğim.

gt seçicisi

jQuery’de :gt() seçicisi girilen indis değerinden büyük indise sahip nesneleri seçmemizi sağlar.. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’ü hariç diğerlerine işlem yapmak istediğimizde şöyle bir kod uygularız;

$("ul li:gt(2)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/EjftH

Şimdi bunun aynısını css ile yapalım;

ul li:nth-of-type(3) ~ li {
  color: red
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/pBdGg

lt seçicisi

jQuery’de :lt() seçicisi girilen indis değerinden küçük indise sahip nesneleri seçmemizi sağlar. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’üne işlem yapmak için şöyle bir kod uygularız;

$("ul li:lt(3)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/Abdmp

Şimdi bunun aynısını css ile yapalım;

ul li {
  color: red
}
ul li:nth-of-type(3) ~ li {
  color: #000
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/bKtcH

Evet gördüğünüz gibi, css’de birazcık hile ile bu işlemleri yapabildik 🙂 Gerçi lt olayı tam anlamıyla sağlıklı çalışmıyor ama yinede ilerisi için ne olur bilinmez 🙂

Not: ~ ve :nth-of-type(n) seçicileri css3 seçicileri olduğu için sadece modern tarayıcılar desteklemektedir. Gerçi biraz araştırdım ~ ie7 ve üzeri destekliyormuş, onuda ekleyeyim ek olarak 🙂

CSS ile Dikey Ortalama

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.

Nasıl Yapacağız?

Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.

Hadi Yapalım

<!DOCTYPE>
<html>
<head>
	<title>css dikey ortalama</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.box {
		width: 500px;
		height: 300px;
		background: #111;
		color: #fff;
		display: table
	}
	.box p {
		display: table-cell;
		vertical-align: middle;
		text-align: center
	}
	</style>
</head>
<body>

<div class="box">
	<p>
		burası ortalanacak..
	</p>
</div>

</body>
</html>

Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..

IE7 ve alt sürümleri için fix

CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına #işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;

<div class="box">
	<p>
		<span>
			burası ortalanacak..
		</span>
	</p>
</div>

Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;

.box {
	width: 500px;
	height: 300px;
	background: #111;
	color: #fff;
	display: table;
	#position: relative
}
.box p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	#position: absolute;
	#top: 50%;
	#width: 100%
}
.box p span {
	#position: relative;
	#top: -50%
}

İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.

CSS’de Arkaplan Saydamlığı

Bildiğiniz gibi css’de nesneye opacity verdiğimizde, nesnenin içindekilerle birlikte saydamlığı değişiyor.. Ama genelde bize lazım olan, arkaplanın saydamlaşmasıdır.. Bunun için görsel oluşturmakta biraz mantıksızca.. Yine css kullanarak daha basit bir yol ile bu işlemi kolayca yapabiliriz..

Nasıl?

:before ile nesnenin öncesine boş bir içerik ekletip genişlik ve yükseklikdeğerlerini 100% yaptıktan sonra, position değerini absolute yapıp z konumunu -1 yapmalıyız.. Daha sonra nesne öncesine eklettiğimiz içeriğin kapsayıcı nesne içinde kalması için, kapsayıcı nesneye position relativedeğerini vermeliyiz.

Peki ya RGBA?

Normal şartlarda renk şeffaflığı için rgba kullanılabilir.
(Bkz: http://codepen.io/tayfunerbilen/pen/HLGif)
Ancak bu işlem sadece arkaplan rengi için değil, aynı zamanda arkaplan resmi ya da arkaplandaki herhangi bir şey için geçerli olduğundan, rgba bunun yerini tutmuyor ne yazık ki 🙂