Home
CSS Genel Seçici (*) ve CSS Element Seçici

CSS Genel Seçici (*) ve CSS Element Seçici

Css 31 Ekim 2019

Arkadaşlar bu yazımızda Css Genel Seçici ( Evrensel Seçici) ve Css Element Seçici Nedir ve nasıl kullanılır.

Css Genel ( evrensel ) Seçici

Html sayfasındaki bütün elemanları seçmemizi sağlar. “*” karakteri ile yaparız. Bütün karakterlerde bir değişiklik yapmamız gerektiğinde Css genel seçici kullanırız. Tek tek bütün elemanları seçmek ile uğraşmamış oluruz.

Örnek verelim. Html sayfasındaki tüm elemanları seçip renklerini mavi (blue) yapalım. Daha önceki derslerimizde öğrendiğimiz gibi Css kodlarımızı <style> etiketi içine yazıyoruz.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style> 
*{ /* sadece yıldız(*) karakteri ile tüm nesneleri seçmiş olduk. */
color:blue;
}
</style>
</head>
<body>
<h1> Örnek Başlık </h1>
<p>Örnek bir paragraf.</p>
<p>Örnek bir paragraf.</p>
<p>Örnek bir paragraf.</p>
<ul>
  <li> örnek </li>
  <li>örnek</li>
  <li> örnek</li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

css genel seçici

Genel Seçici kullanırken ikinci bir yöntemde bir etiketin altındaki tüm elemanları seçme işlemidir. Örneğin <div class=”sinif”>…</div> içindeki tüm elemanları seçmek istersek, css de “div.sinif * “şeklinde yazarak bu işlemi yapabiliriz.

CSS Element ( Tür ) Seçici

CSS element seçici ile istediğimiz elementi css kodlarımızda yazarak ulaşabiliyoruz ve istediğimiz özelliklerini değiştirebiliyoruz. <p> elementini seçmek için css de “p” yazıp kod blogunu açıp istediğimiz özellikleri değiştirebiliyoruz.

Örnek olarak h1 etiketinin rengini kırmızı(red) ve p etiketinin rengini mavi (blue) yapalım.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style> 
h1{ /* css de h1 elementini seçip rengini kırmızı yaptık  */
color:red;
}
p{ /* css de p elementini seçip rengini mavi yaptık   */
color:red;
}
</style>
</head>
<body>
<h1> Örnek Başlık </h1>
<p>Örnek bir paragraf.</p>
</body>
</html>

Tarayıcıdaki Sonucu:

css element seçici sonucu

Yukarıdaki örnekte sadece bir tane <h1> ve <p> etiketi olduğu için problem olmaz. Örneğin sayfamızda on tane <p> etiketi olsaydı hepsinin rengini de mavi yapacaktı. Bu istediğimiz bir durum olmayabilir. İlerleyen derslerimizde sadece istediğimiz etiketleri direk nasıl seçeceğimizi öğreneceğiz.

Diğer Seçiciler ile İlgili Yazılarımız

  1. ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
  2. Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
  3. Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
  4. Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
  5. Genel Kardeş ( Sibling ) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
  6. Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
  7. Çoklu ( Multiple ) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
  8. Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
  9. CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
  10. CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.

Başka bir yazımızda görüşmek dileğiyle…

Related

Leave a Reply