CSS Tagları Özet
CSS Seçiciler ile Çalışmak, İstediğimiz HTML Etiket Yapısına Özellik Ekleyebilmek
CSS seçiciler, HTML taglarına ulaşarak biçim atamaları yapmamızı sağlar. CSS işlemleri, HTML tagı içinde style
attribute kullanarak yani inline, <head>
arasında <style>
tagı kullanarak yani internal ya da dosya uzantısı .css olan bir dosya oluşturup bu dosyayı <head>
arasına ekleyerek yani external şekilde kullanabiliriz.
Inline
<h1 style="color:orange;">Turuncu renkli başlık</h1>
Internal
<head>
<style>
h1{
color: orange;
}
</style>
</head>
<body>
<h1>Turuncu renkli başlık</h1>
</body>
External
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
styles.css
dosyası:
h1{
color:orange;
}
Kısaca CSS kodlarımızı nasıl yazabileceğimizi öğrendikten sonra şimdi CSS seçicileri kullanarak nasıl HTML taglarına erişebiliyoruz onlara bakalım.
Seçiciler
Genel seçici *
Bu seçiciyi kullanarak tüm etiketlere CSS uygula demiş oluyoruz.
*{
margin:0;
padding:0;
}
div *{
color:orange;
}
İlk kullanımda tüm elementlerin margin ve padding değerlerini sıfırlamış olduk. İkinci kullanımda div *
diyerek tüm div elementleri içindeki elementlerin yazı rengine erişmiş olduk.
Element Seçiciler (Element Selectors)
Bu seçiciler ile doğrudan HTML etiket isimlerini kullanarak CSS uygulayabiliriz.
div{
background-color: orange;
}
Tüm div etiketleri etkilenir.
Sınıf Seçiciler (Class Selectors)
Bu seçiciler ile sınıf atadığımız etiketlere CSS uygulayabiliriz. Sınıf ismine erişmek için sınıf isminin başına nokta .
ekliyoruz.
.turuncu{
background-color: #FFA500;
}
p.mavi{
color:blue;
}
<p class="turuncu">Arka plan rengim turuncu</p>
<div class="turuncu">Arka plan rengim turuncu</div>
Burada ikinci kullanımda p.mavi
sınıf ismi mavi olan p elementlerine erişmiş olduk.
Id Seçiciler (Id Selectors)
Bu seçiciler ile id atadığımız elementlere CSS uygulayabiliriz. Id' ler tek bir elemente ait olmalıdırlar. Id özelliğine erişmek id
' nin başına #
ekliyoruz.
#mavi{
background-color: #0000FF;
}
#lila{
color: #c8a2c8;
}
<p id="mavi">Arka plan rengim turuncu</p>
<div id="lila">yazı rengim lila</div>
Özellik Seçiciler (Attribute Selectors)
Bu seçiciler ile özelliğini belirttiğimiz elementlere CSS uygulayabiliriz. Özelliğin içi boş olsada element bundan etkilenecektir. Özelliklere erişmek için yapmamız gereken tek şey köşeli parantezler içinde özelliğin ismini [attribute]
şeklinde yazıyoruz.
[name]{
color: orange;
}
<button name="">gönder</button>
<ul>
<li name="html">HTML</li>
<li name="css">CSS</li>
</ul>
Bu şekilde name attribute alan tüm elementler etkilenir.
.btn[disabled] {
color: orchid;
}
<button class="btn" disabled="disabled">Submit</button>
Burada sınıfı .btn
ve niteliği(attribute) [disabled]
olan butona CSS uyguladık.
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>
Burada tam eşleşen özelliğe CSS uyguladık. Büyük-küçük harf duyarlılığı vardır.
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>
Burada ~=
ifadesi ile title
özelliği "isim" içeren divlere eriştik.
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>
Burada ^=
ifadesi ile href
özelliği "https" ile başlayan a etiketlerine eriştik.
a[href *= "http"] {
color: palegreen;
}
<a href="https://www.google.com/">google</a>
<a href="https://github.com/">github</a>
<a href="http://github.com/">github</a>
Burada *=
ifadesi ile href
özelliği "http" içeren a etiketlerine eriştik.
div[class$="test"] {
background: yellow;
}
<div class="bir_test">Lorem, ipsum dolor.</div>
<div class="iki-test">Lorem, ipsum dolor.</div>
<div class="uc test">Lorem, ipsum dolor.</div>
<div class="dorttest">Lorem, ipsum dolor.</div>
Burada $=
ifadesi ile class
özelliği sonunda "test" içeren divlere eriştik.
a[href*="https"][href$="com"] {
color: orange;
}
<a href="https://www.google.com/"> Google</a>
<a href="https://reactjs.org/">React.js</a>
<a href="https://css-tricks.com/">Css Tricks</a>
Burada https
ile başlayan ve sonunda com
olan a
etiketlerine eriştik.
Artık ana hatlarıyla öğrendiğimiz CSS seçicilere daha yakından bakabiliriz.
Grup Seçiciler (Group Selectors)
Çoğunlukla etiketlere verilen CSS özellikleri benzer veya ortak olabilir. Bu gibi durumlarda seçicileri gruplayarak daha temiz CSS dosyaları oluşturabiliriz.
h1,h2,h3{
color:orange;
}
Tüm h1
, h2
, h3
etiketlerine erişmiş olduk.
p.turuncu{
color:orange;
}
<p class="turuncu">turuncu yazı</p>
<p>normal yazı</p>
Burada sınıf ismi .turuncu
olan p
etiketlerine ulaştık.
Çocuk seçiciler (Child Selectors)
Artık etiketleri birbiriyle olan hiyerarşik durumuna göre seçerek CSS özelliklerini belirleyeceğiz. Child selector, kendisi ve kendisini sarmalayan bir üst etiketle olan ilişkiyi gösterir ve >
işareti ile ifade edilir.
p > span{
color:orange;
}
p > span >b{
color:blue;
}
div > ul >li#first{
color:red;
}
<p>
<span>child element</span>
</p>
Parent etiketi yani bir üst kapsayıcısı p
olan span
etiketine ulaştık.
<p>
<span>Burası turuncu renkte <b>mavi renkte yazılacak</b></span>
</p>
<p>
<span>Burası turuncu renkte <b>mavi renkte yazılacak</b></span>
</p>
<div>
<ul>
<li id="first">bir</li>
<li>iki</li>
</ul>
</div>
Torun-Soy Seçiciler (Descentad Selectors)
Bir kapsayıcı yani parent element altındaki tüm etiketlere ulaşmak için kullanılır. Her ulaşılacak etiket arasına boşluk konulur.
div p{
background-color:blue;
}
Burada div içinde olan tüm p etiketlerine ulaşırız.
<div>
<p>Bu p etiketi arka planı mavi renk</p>
<ul>
<li>
<p>Bu p etiketi arka planı mavi renk</p>
</li>
</ul>
<p>Bu p etiketi arka planı mavi renk</p>
</div>
Genel Kardeş Seçiciler (General Sibling Selectors)
Aynı parent etikete sahip olan ve birbiri ardına gelen etiketleri seçmek için kullanılır. AltGr+ü
Kambinasyonuyla oluşan ~
işareti ile gösterilir.
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>
Burada dikkat edilmesi gereken iki nokta var. Birincisi <p>
etiketi <ul>
etiketinden sonra gelmeli (arada başka etiketler olabilir) ve ikiside aynı düzeyde yani aynı parent etiketine sahip olmalılar.
Bitişik Kardeş Seçiciler (Adjacent Sibling Selector)
Genel kardeş seçiciden tek farkı belirtilen etiketler bitişik arka arkaya gelmeliler. +
işareti ile gösterilir.
ul + p{
color:green;
}
<div>
<p>Lorem, ipsum.</p>
<ul>
<li>
<p>Lorem, ipsum.</p>
</li>
</ul>
<p>Bu p etiketinin yazı rengi yeşil</p>
</div>
Sahte Sınıf Seçiciler (Pseudo classes)
Sahte sınıflar kullanarak HTML etiketlerine CSS uygulayabiliriz. Kullanımları selector:pseudo class{}
şeklindedir.
:link
Daha önce tarayıcıda açılmamış linke CSS uygular. Not: Etkisini görmek için tarayıcıya geçmişi temizlemek gerekebilir.
a#google:link {
color: red;
}
<a id="google" href="https://www.google.com/">Google</a>
:hover
Seçici ile işaretlenen etiketin üzerine mouse ile gelindiğinde CSS uygalanır ve mouse üzerinde değilken etki kaybolur.
a.test:hover {
color: red;
}
<a class="test" href="https://www.github.com/">Github</a>
:active
Mouse ile tıklandığında CSS uygulanır. Tıklama kaldırıldığında etki kaybolur.
a:active {
position: relative;
top: 5px;
}
<a href="#">Submit</a>
:first-child
İlk child etikete CSS 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 child etikete CSS uygular.
::first-letter
Blok seviyesinde bir etiketteki ilk harfe CSS uygular. <span>
blok seviyesinde bir etiket olmadığından bu pseudo class uygulanamaz.
p::first-letter {
font-size: 20px;
color: orange;
}
<p>Lorem ipsum dolor sit.</p>
::first-line
Blok seviyesinde bir etiketin ilk satırına CSS uygular.
::before
Belirtilen etiketin önüne CSS uygular.
p::before {
content: "selam";
color: orange;
}
<p>Lorem ipsum dolor sit.</p>
::after
Belirtilen etiketin sonuna CSS uygular. Kullanımı ::before
ile aynıdır.
Kaynaklar
Yorumlar