CSS Selectors

Entry posted by Doğuhan ELMA in Cascade Kasım 12

37 views

https://www.herseyibul.com/entry/5-css-selectors/

1. TEMEL SELECTORS (Basic Selectors)

Universal Selector

* {
    margin: 0;
    padding: 0;
}
/* Sayfadaki TÜM elementleri seçer */

Type Selector (Element Selector)

div {
    background: blue;
}
/* Tüm <div> elementlerini seçer */

Class Selector

.button {
    padding: 10px;
}
/* class="button" olan tüm elementleri seçer */

.header.active {
    /* Hem header hem active class'ına sahip elementler */
}

ID Selector

#main-header {
    font-size: 24px;
}
/* id="main-header" olan elementi seçer */
/* ID'ler sayfada benzersiz olmalı */

Attribute Selector

/* Temel attribute varlığı */
[disabled] {
    opacity: 0.5;
}

/* Tam eşleşme */
[type="text"] {
    border: 1px solid gray;
}

/* Başlangıç eşleşmesi */
[href^="https"] {
    color: green;
}

/* Bitiş eşleşmesi */
[href$=".pdf"] {
    background: url(pdf-icon.png);
}

/* İçerir */
[class*="btn"] {
    /* class'ında "btn" geçen tüm elementler */
}

/* Kelime eşleşmesi */
[class~="active"] {
    /* class listesinde tam "active" kelimesi olan */
}

/* Tire ile başlayan */
[lang|="en"] {
    /* lang="en" veya lang="en-US" gibi */
}

/* Case-insensitive */
[type="text" i] {
    /* büyük-küçük harf duyarsız */
}

2. COMBINATORS (Birleştiriciler)

Descendant Combinator (Boşluk)

div p {
    color: red;
}
/* div içindeki TÜM <p> elementleri (herhangi bir seviyede) */

<div>
    <p>Seçilir</p>
    <section>
        <p>Bu da seçilir</p>
    </section>
</div>

Child Combinator (>)

div > p {
    color: blue;
}
/* div'in DOĞRUDAN çocuğu olan <p>'ler */

<div>
    <p>Seçilir</p>
    <section>
        <p>Seçilmez (torun)</p>
    </section>
</div>

Adjacent Sibling Combinator (+)

h1 + p {
    font-weight: bold;
}
/* h1'den HEMEN SONRA gelen <p> */

<h1>Başlık</h1>
<p>Seçilir</p>
<p>Seçilmez</p>

General Sibling Combinator (~)

h1 ~ p {
    margin-top: 20px;
}
/* h1'den SONRA gelen TÜM <p> kardeşleri */

<h1>Başlık</h1>
<p>Seçilir</p>
<div>Ara element</div>
<p>Bu da seçilir</p>

3. PSEUDO-CLASSES (:)

Dinamik Durumlar

a:hover {
    color: red;
}

a:active {
    color: purple;
}

a:visited {
    color: gray;
}

input:focus {
    border-color: blue;
}

button:disabled {
    opacity: 0.5;
}

Yapısal Pseudo-Classes

/* İlk çocuk */
li:first-child {
    font-weight: bold;
}

/* Son çocuk */
li:last-child {
    border-bottom: none;
}

/* Belirli sıradaki çocuk */
li:nth-child(3) {
    color: red;
}

/* Çift sıradakiler */
li:nth-child(even) {
    background: #f0f0f0;
}

/* Tek sıradakiler */
li:nth-child(odd) {
    background: white;
}

/* Formül ile */
li:nth-child(3n+1) {
    /* 1, 4, 7, 10... */
}

/* Sondan sayma */
li:nth-last-child(2) {
    /* Sondan 2. element */
}

/* Belirli tipten ilk */
p:first-of-type {
    margin-top: 0;
}

/* Belirli tipten son */
p:last-of-type {
    margin-bottom: 0;
}

/* Belirli tipten n'inci */
p:nth-of-type(2) {
    font-size: 18px;
}

/* Tek çocuk */
div:only-child {
    text-align: center;
}

/* Belirli tipten tek */
p:only-of-type {
    font-style: italic;
}

/* Boş elementler */
div:empty {
    display: none;
}

Mantıksal Pseudo-Classes

/* DEĞİL */
p:not(.special) {
    color: gray;
}

/* HERHANGİ BİRİ */
:is(h1, h2, h3) {
    font-family: Arial;
}

/* Specificity'si 0 olan :is() */
:where(h1, h2, h3) {
    margin: 0;
}

/* VARSA */
div:has(> img) {
    border: 1px solid black;
}

div:has(+ p) {
    /* Hemen sonrasında p olan div'ler */
}

Form Pseudo-Classes

input:required {
    border-color: red;
}

input:optional {
    border-color: gray;
}

input:valid {
    border-color: green;
}

input:invalid {
    border-color: red;
}

input:in-range {
    /* min-max aralığında */
}

input:out-of-range {
    /* min-max dışında */
}

input:checked {
    /* checkbox/radio seçili */
}

input:indeterminate {
    /* belirsiz durum */
}

input:read-only {
    background: #f5f5f5;
}

input:read-write {
    background: white;
}

Diğer Önemli Pseudo-Classes

/* Root element (genelde <html>) */
:root {
    --main-color: blue;
}

/* Hedef element (URL #hash) */
:target {
    background: yellow;
}

/* Dil */
:lang(tr) {
    quotes: "«" "»";
}

4. PSEUDO-ELEMENTS (::)

/* İçeriğin başına */
p::before {
    content: "→ ";
    color: blue;
}

/* İçeriğin sonuna */
p::after {
    content: " ←";
    color: red;
}

/* İlk satır */
p::first-line {
    font-weight: bold;
}

/* İlk harf */
p::first-letter {
    font-size: 2em;
    float: left;
}

/* Seçili metin */
::selection {
    background: yellow;
    color: black;
}

/* Placeholder */
input::placeholder {
    color: #999;
}

/* Marker (liste işaretleri) */
li::marker {
    color: red;
}

6. MODERN VE GELİŞMİŞ SELECTORS

:has() - Parent Selector

/* İçinde img olan article'lar */
article:has(img) {
    display: grid;
}

/* Hemen sonrasında .warning olan div'ler */
div:has(+ .warning) {
    border: 2px solid red;
}

/* İçinde checked input olan label'lar */
label:has(input:checked) {
    font-weight: bold;
}

:is() ve :where()

/* Eski yöntem */
h1 a, h2 a, h3 a {
    color: blue;
}

/* Modern yöntem */
:is(h1, h2, h3) a {
    color: blue;
}

/* Specificity'yi sıfırlamak için */
:where(h1, h2, h3) a {
    color: blue;
}

:not() Gelişmiş Kullanım

/* Birden fazla koşul */
button:not(.primary):not(.secondary) {
    background: gray;
}

/* Karmaşık selector */
div:not(.container > .item) {
    padding: 20px;
}

Sign In

CSS

CSS Selectors

1. TEMEL SELECTORS (Basic Selectors)

Universal Selector

2. COMBINATORS (Birleştiriciler)

Descendant Combinator (Boşluk)

3. PSEUDO-CLASSES (:)

Dinamik Durumlar

6. MODERN VE GELİŞMİŞ SELECTORS

:has() - Parent Selector

0 Comments

Recommended Comments

Browse

Activity

Important Information