Id , etiket ismi ve class olarak etiketlere ulaşabileceğimiz 3 temel yöntemden başka kullanabileceğimiz belli amaçlara göre hazırlanmış Selector türleri vardır.
Bu selector türlerini şu şekilde guruplayabiliriz ;
- Group Selectors
- Attribute Selectors
- Pseudo Selectors
Css' de Group Selector Nedir ve Nasıl Kullanılır ?
Css Group Selector' larını bir kapsam içinde aradığımız etiketler için kullanıyoruz. Örneğin farklı seviyelerde olan bir <p> etiketini düşünelim ;
<div> <p id="first"> </p> <p class="description"> </p> </div> <p> </p>
ve bu etiketlerden sadece div altındaki p etiketlerine ulaşmak istiyorsak bu durumda group selectors' ları kullanmamız gerekiyor.
div p {
/* div altındaki tüm p etiketleri */
}
div #first{
/* div altında id' si first olan eleman */
}
div .description{
/* div altında class' ı description olan eleman */
}
Diğer group selector kullanımları ;
1 : (*) => tüm etiketler
2 : (p) => tüm p etiketleri
3 : (div p) => div içindeki tüm p etiketleri
4 : (div,p) => tüm div ve tüm p etiketleri
5 : (div > p) => üst etiketi div olan tüm p etiketleri
6 : (p ~ div)=> p ile aynı seviyede tüm div etiketleri
7 : (p + div)=> p etiketinden sonra gelen aynı seviyedeki div etiketi
Css' de Attribute Selector Nedir ve Nasıl Kullanılır ?
Attribute Selector' larını etiketlerde belirtilen attribute özelliğine göre kullanıyoruz.
Örneğin ;
<img src="resim.jpg" alt="doğa resimleri">
img etiketi için src ve alt özelliği bir attribute özelliğidir ve bu img etiketine ulaşabilmek için bu attribute özelliklerini kullanabiliriz.
Eğer sayfadaki alt attribute olan tüm img etiketlerine ulaşmak istersek ;
1-) Attribute ismine göre;
** alt attribute özelliğine sahip olan tüm img etiketleri seçilir.
img[alt] {
}
2-) Attribute özelliğine atanan değere göre ;
** alt attribute özelliğine "doğa resimleri" atanmış tüm img etiketleri seçilir.
img[alt="doğa resimleri"] {
}
3-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelime aranır.
** alt attribute özelliği içinde doğa kelimesi geçen tüm img etiketleri seçilir.
img[alt~="doğa"] {
}
4-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelimenin en başta olması aranır.
** alt attribute özelliği doğa kelimesi ile başlayan tüm img etiketleri seçilir.
img[alt^="doğa"] {
}
5-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelimenin en sonda olması aranır.
** alt attribute özelliği doğa kelimesi ile biten tüm img etiketleri seçilir.
img[alt$="doğa"] {
}
Css' de Pseudo Selectors Nedir ve Nasıl Kullanılır ?
Pseudo Selectors' lar 2 grup altında ele alınıyor.
- Pseudo Classes
- Pseudo Elements
Pseudo Class Selector' ları html etiketlerinin durumunu kontrol ettikten sonra uygulayacağımız css kodları için kullanılır.
Kullanımı şu şekildedir
selector:pseudo-class {
property:value;
}
<a> etiketi için kullanabileceğimiz pseudo class selector kullanımları ;
/* henüz ziyaret edilmemiş link */
a:link {
color: blue;
}
/* ziyaret edilmiş link */
a:visited {
color: gray;
}
/* mouse link üzerindeyken */
a:hover {
color: yellow;
}
/* linke tıklanma anı */
a:active {
color: red;
}
Yukarıda görüldüğü gibi tanımlanan bir link için kullanabileceğimiz bazı pseudo class selector 'ları vardır. Tabi ki bu selector'lar sadece <a> etiketi için değildir. Örneğin bir div etiketi için hover olayını gerçekleştirebiliriz ;
div:hover {
background-color: blue;
}
div' in üzerine mouse ile geldiğimiz an da div' in arkaplanı mavi olur.
Ya da bir div içerisindeki bir p etiketini istediğimiz zaman görünür hale getirebiliriz ;
<div> p etiketini görmek için mouse ile üzerine gel <p>Paragraf</p> </div>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
** display : none; => ulaştığımız bir etiketin görünmez olmasını sağlar. Örneğimizde <p> etiketi içindeki "Paragraf" yazısı görünmez olur. Ancak pseudo class selector' ını kullanarak <div> etiketi üzerine mouse ile geldiğimiz anda yani <div> etiketi için hover olayı gerçekleştiği anda <p> etiketinin display özelliğini block yaparak görünür hale getirmiş oluruz.
** first-child ve last-child pseudo class selector kullanımı: Bir kapsam içindeki ilk alt eleman ya da son alt eleman seçiminde kullanılır.
p:first-child {
color: blue;
}
Buradaki örnekte her hangi bir kapsam içindeki ilk <p> etiketi seçilir.
p i:first-child {
color: blue;
}
Buradaki örnekte tüm <p> etiketleri içindeki ilk <i> etiketi seçilir.
Pseudo Element Selector' ları ise bir etiketinin her hangi bir parçasını seçmek istediğimizde kullanırız. Pseudo class selector' larından farklı olarak "::" sembolü kullanılır.
Kullanımı şu şekildedir ;
selector::pseudo-element {
property:value;
}
Örneğin; <p> etiketinin kapsamındaki yazı içinde ilk satırı seçmek istersek ::first-line özelliğini kullanabiliriz.
p::first-line {
color: red;
}
Ya da <p> etiketinin kapsamındaki yazı içinde ilk harfi seçmek istersek ::first-letter özelliğini kullanabiliriz.
p::first-letter {
color: green;
font-size: xx-large;
}
Bu örneğimizde paragrafın ilk harfi yeşil ve büyük font olarak karşımıza gelir.
Sıklıkla kullandığımız ::after ve ::before pseudo element selector' ları ise bir etiketten hemen önce ya da sonra bir içerik eklemek istediğimizde kullanılır.
p::after {
content: " - eklenecek yazı";
}
** <p> etiketinin bittiği yerden itibaren content içindeki yazı etiket sonuna eklenir. Aynı şekilde <p> etiketinden hemen önce eklemek istersek :before pseudo element selector' ını kullanabiliriz.
** Peki ::after ve ::before pseudo element selector' ları sadece bu amaç içinmi kullanırız ?
.clearfix::after {
content: "";
display: block;
clear: both;
}
şeklinde sıklıkla kullandığımız css kod parçasını float özelliğini kullandıktan sonra clear işlemi yapmak için kullanıyoruz.
Henüz floating kavramını öğrenmedik ancak buradaki kullanıma dikkat etmenizi istiyorum. Her hangi bir etiket oluşturup bu etikete clear özelliğini uygulayabilirdik ancak bunun yerine .clearfix isminde bir class oluşturup hemen arkasına float 'i temizlemek için css kodları ekledik. Yani ekstra bir etiket eklemek zorunda kalmadık. Bu class' in eklendiği etiketin hemen ardından görünmez bir alan oluşturup o alana bir değerleri atamış oluyoruz.