CSS Dersleri 6 - CSS Seçiciler ile Çalışmak

Bu dersimiz ile temel anlamda seçicileri anlattık. Seçicileri videolar izleyerek uygulamalı şekilde öğrenirseniz yazılar size yabancı gelmeyecektir.

CSS Dersleri 6 - CSS Seçiciler ile Çalışmak

CSS seçicilerini kullanarak, istediğimiz HTML işaretleme yapısına nitelikler ekleyin
CSS seçicileri, HTML etiketlerine erişmemize ve biçimlendirme atamaları yapmamıza izin verir. HTML etiketindeki style niteliğini, yani inline kullanabiliriz, CSS işlemlerini kullanmak için <head> arasında <style> etiketini kullanabiliriz, yani dahili olarak kullanabiliriz veya .css dosya uzantısına sahip bir dosya oluşturup <head>'r ekleyebiliriz.

Seçiciler

Genel seçici (*)

Bu seçiciyi kullanarak tüm etiketlerimize CSS kodlarımızı uygulayabiliriz.

*{
  margin:0;
  padding:0;
}
div *{
  color:orange;
}

İlk kullanımda tüm elementlerin margin ve padding değerlerini sıfıra çekmiş olduk ve ikinci kullanım ile ise tüm elementleri turuncu yazı rengine çevirdik.

Element seçicileri

Direkt olarak HTML etiketlerinin isimlerini yazarak kullandığımız seçiciler.

div{
  background-color: orange;
}

Sınıf ve ID seçicileri

Bu seçiciler ile atadığımız class ve id değerlerine etki edebiliriz.

.turuncu{
  background-color: #FFA500;
}
p.mavi{
  color:blue;
}
 <p class="turuncu">Arka plan rengim turuncu</p>
 <div class="turuncu">Arka plan rengim turuncu</div>
#mavi{
  background-color: #0000FF;
}
#lila{
  color: #c8a2c8;
}
 <p id="mavi">Arka plan rengim turuncu</p>
 <div id="lila">yazı rengim lila</div>

Class için (.) ID için ise (#) kullanıyoruz.

Nitelik seçicileri

Bu seçicileri kullanarak, özelliklerini belirlediğimiz elemanlara CSS uygulayabiliriz. Öznitelik boş olsa bile öğeler etkilenir. Bir özniteliğe erişmek için tek yapmanız gereken özniteliğin adını köşeli parantez içinde [attribute] olarak yazmaktır.

[name]{
  color: orange;
}
<button name="">gönder</button>
<ul>
      <li name="html">HTML</li>
      <li name="css">CSS</li>
</ul>
div[title="deneme"] {
  background-color: orange;
}
<div title="Deneme">Lorem, ipsum dolor.</div>
<div title="deneme">Lorem, ipsum dolor.</div>
<div name="denemefalan">Lorem, ipsum.</div>
div[title~="isim"] {
  color: orange;
}
<div title="isim">Lorem, ipsum dolor.</div>
<div title="isimler">Lorem, ipsum dolor.</div>
<div title="isim ve şehirler">Lorem, ipsum dolor.</div>
a[href ^= "https"] {
  color: palegreen;
}
<a href="https://www.google.com/">google</a>
<a href="https://github.com/">github</a>
<a href="http://github.com/">github</a>

Grup seçicileri

Etiketlere verilen CSS nitelikleri birbirine yakın veya ortak olabilir. Bu gibi durumlarda seçicileri gruplayabiliriz.

h1,h2,h3{
  color:orange;
}
p.turuncu{
  color:orange;
}
<p class="turuncu">turuncu yazı</p>
<p>normal yazı</p>

Çocuk seçiciler

Şimdi, birbirimizin hiyerarşik durumuna göre etiketler seçerek CSS özelliklerini belirleyeceğiz. Bir alt seçici, kendisiyle ve sarma üst etiketiyle bir ilişkiyi belirtir ve bir > sembolü ile temsil edilir.

p > span{
  color:orange;
}
p > span >b{
  color:blue;
}
div > ul >li#first{
  color:red;
}
<p>
  <span>child element</span>
</p>

Descentad seçiciler

Yani ebeveyn olan elementin altındaki tüm etiketlere ulaşmak için tercih edilir.

div p{
  background-color:blue;
}

Genel Kardeş seçiciler

Aynı ebeveyn etikete sahip ve ard arda gelen etiketler için kullanılır.

ul ~ p{
  color:orange;
}
<div>
  <p>Lorem, ipsum.</p>
  <ul>
    <li>
      <p>Lorem, ipsum dolor.</p>
    </li>
  </ul>
  <h3>Lorem, ipsum dolor.</h3>
  <p>Bu p etiketi turuncu renkte</p>
</div>

Pseudo Sınıf seçiciler

Sahte sınıfları kullanarak CSS'yi HTML etiketlerine uygulayabiliriz. Amacı seçicidir: pseudo class {}.

: link
Tarayıcıda daha önce açılmamış bağlantılara CSS uygular. Not: Efekti görmek için tarayıcınızın geçmişini temizlemeniz gerekebilir.

a#google:link {
  color: red;
}
<a id="google" href="https://www.google.com/">Google</a>

:hover

İşaretlenen etiketin üzerine mouse ile geldiğimizde CSS uygular.

a.test:hover {
  color: red;
}
<a class="test" href="https://www.github.com/">Github</a>

:active

Mouse ile tıklandığı vakit CSS uygulanır.

a:active {
  position: relative;
  top: 5px;
}
<a href="#">Submit</a>

:first-child

İlk çocuk etikete uygulanır.

ul > li:first-child {
  color: orange;
}
<ul>
<li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
</ul>

:last-child

Son çocuk etikete uygulanır.

::first-letter

Blok halde bir etiketteki ilk harfe uygulanır.

p::first-letter {
  font-size: 20px;
  color: orange;
}
<p>Lorem ipsum dolor sit.</p>