Bölüm 2: CSS Seçicileri ve Özellik Yönetimi

h1 {
    color: blue;
    font-size: 2em;
}
 
p {
    line-height: 1.6;
    margin-bottom: 15px;
}
 
a {
    color: #007acc;
    text-decoration: none;
}

<h1>Bu başlık mavi olacak</h1>
<p>Bu paragraf 1.6 satır aralığına sahip olacak</p>
<a href="#">Bu link mavi ve altı çizgisiz olacak</a>

.highlight {
    background-color: yellow;
    padding: 10px;
}
 
.btn {
    background-color: #007acc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}
 
.text-center {
    text-align: center;
}

<p class="highlight">Bu paragraf sarı arka plana sahip</p>
<button class="btn">Mavi buton</button>
<div class="text-center">Ortalanmış metin</div>

#header {
    background-color: #333;
    color: white;
    padding: 20px;
}
 
#main-content {
    max-width: 1200px;
    margin: 0 auto;
}
 
#footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 15px;
}

<header id="header">Ana Başlık</header>
<main id="main-content">Ana İçerik</main>
<footer id="footer">Alt Bilgi</footer>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sidebar p {
    font-size: 14px;
    color: #666;
}
 
#header a {
    color: white;
    text-decoration: none;
}

<div class="sidebar">
    <p>Bu paragraf küçük ve gri olacak</p>
    <div>
        <p>Bu da küçük ve gri olacak (derinlemesine seçim)</p>
    </div>
</div>

.menu > li {
    display: inline-block;
    margin-right: 20px;
}

<ul class="menu">
    <li>Ana Menü 1</li>  <!-- Seçilir -->
    <li>Ana Menü 2       <!-- Seçilir -->
        <ul>
            <li>Alt Menü</li>  <!-- Seçilmez -->
        </ul>
    </li>
</ul>

h2 + p {
    font-weight: bold;
    margin-top: 0;
}

<h2>Başlık</h2>
<p>Bu paragraf kalın olacak</p>  <!-- Seçilir -->
<p>Bu paragraf normal olacak</p>  <!-- Seçilmez -->

h2 ~ p {
    color: #666;
}

/* href özelliği olan öğeler */
[href] {
    color: blue;
}
 
/* Belirli özellik değeri */
[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}
 
/* Özellik değeri ile başlayanlar */
[href^="https"] {
    color: green;
}
 
/* Özellik değeri ile bitenler */
[href$=".pdf"] {
    background: url(pdf-icon.png) no-repeat left;
    padding-left: 20px;
}
 
/* Özellik değeri içerenler */
[title*="important"] {
    font-weight: bold;
}

<a href="https://example.com">Güvenli link (yeşil)</a>
<a href="document.pdf">PDF dosyası (ikon ile)</a>
<input type="text" placeholder="Metin girişi">
<div title="This is important">Önemli içerik (kalın)</div>

/* Link durumları */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }
 
/* Form durumları */
input:focus {
    border-color: #007acc;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 122, 204, 0.3);
}
 
button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}
 
input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* İlk ve son öğeler */
li:first-child {
    font-weight: bold;
}
 
li:last-child {
    border-bottom: none;
}
 
/* Sıralı seçimler */
tr:nth-child(even) {
    background-color: #f9f9f9;
}
 
tr:nth-child(odd) {
    background-color: white;
}
 
/* Belirli pozisyonlar */
p:nth-child(3) {
    color: red;
}
 
/* Formül ile seçim */
li:nth-child(3n+1) {
    margin-left: 0;
}

/* İlk harfi büyüt */
p:first-letter {
    font-size: 3em;
    float: left;
    line-height: 1;
    margin: 0 5px 0 0;
}
 
/* İlk satırı vurgula */
p:first-line {
    font-weight: bold;
    color: #333;
}
 
/* İçerik öncesi ve sonrası ekleme */
.quote:before {
    content: '"';
    font-size: 1.5em;
    color: #007acc;
}
 
.quote:after {
    content: '"';
    font-size: 1.5em;
    color: #007acc;
}
 
/* Seçili metni stillendirme */
::selection {
    background-color: #007acc;
    color: white;
}

/* Specificity: 0001 */
p { color: red; }
 
/* Specificity: 0010 */
.highlight { color: blue; }
 
/* Specificity: 0100 */
#main { color: green; }
 
/* Specificity: 0011 */
p.highlight { color: orange; }
 
/* Specificity: 0101 */
#main p { color: purple; }

/* Ana kart tasarımı */
.blog-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
 
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
 
/* Resim alanı */
.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
 
/* İçerik alanı */
.blog-card .content {
    padding: 20px;
}
 
.blog-card .title {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
 
.blog-card .excerpt {
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}
 
/* Meta bilgiler */
.blog-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: #999;
}
 
.blog-card .author:before {
    content: "👤 ";
}
 
.blog-card .date:before {
    content: "📅 ";
}
 
/* Etiketler */
.blog-card .tags {
    margin-top: 10px;
}
 
.blog-card .tag {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-right: 5px;
}
 
.blog-card .tag:hover {
    background-color: #1976d2;
    color: white;
}

<article class="blog-card">
    <img src="blog-image.jpg" alt="Blog resmi">
    <div class="content">
        <h3 class="title">CSS Seçicileri Rehberi</h3>
        <p class="excerpt">
            CSS seçicilerinin gücünü keşfedin ve etkili stil sayfaları yazın.
        </p>
        <div class="meta">
            <span class="author">Furkan Çay</span>
            <span class="date">15 Haziran 2025</span>
        </div>
        <div class="tags">
            <span class="tag">CSS</span>
            <span class="tag">Web Tasarım</span>
            <span class="tag">Frontend</span>
        </div>
    </div>
</article>

/* ❌ Kötü */
.red-text { color: red; }
.big-box { padding: 20px; }
 
/* ✅ İyi */
.error-message { color: red; }
.content-section { padding: 20px; }

/* ❌ Kötü */
#header .nav ul li a.active { color: red; }
 
/* ✅ İyi */
.nav-link.active { color: red; }

/* BEM metodolojisi örneği */
.card { }
.card__title { }
.card__content { }
.card--featured { }