Articles
CSS'e Giriş
CSS'teki Özellik Seçicilerinin Detayları

CSS'teki Özellik Seçicilerinin Detayları

Bu makale, CSS'teki özellik seçicilerinin detaylarını açıklar.

Özellik seçicileri için ileri eşleşme, geri eşleşme ve kısmi eşleşme yazmayı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-attribute-selector.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-attribute-selector.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Attribute Selectors</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Attribute Selectors</h2></header>
 19        <article>
 20            <h3>element[attribute]</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a[target] {
 25    font-weight: bold;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29<pre>
 30&lt;a href="https://example.com" target="_blank"&gt;Example Link (target="_blank")&lt;/a&gt;
 31&lt;a href="https://example.com"&gt;Example Link (no target)&lt;/a&gt;
 32</pre>
 33                <header><h4>HTML+CSS</h4></header>
 34                <section class="sample-view">
 35                    <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
 36                    <a href="https://example.com">Example Link (no target)</a>
 37                </section>
 38            </section>
 39        </article>
 40        <article>
 41            <h3>element[attribute=value] : =</h3>
 42            <section>
 43                <header><h4>CSS</h4></header>
 44<pre class="sample">
 45input[type="text"] {
 46    border: 2px solid green;
 47}
 48</pre>
 49                <header><h4>HTML</h4></header>
 50<pre>
 51&lt;input type="text" placeholder="Enter text here"&gt;
 52&lt;input type="password" placeholder="Password (no border)"&gt;
 53&lt;input type="text" placeholder="Another text input"&gt;
 54</pre>
 55                <header><h4>HTML+CSS</h4></header>
 56                <section class="sample-view">
 57                    <input type="text" placeholder="Enter text here">
 58                    <input type="password" placeholder="Password (no border)">
 59                    <input type="text" placeholder="Another text input">
 60                </section>
 61            </section>
 62        </article>
 63        <article>
 64            <h3>element[attribute^=value] : ^=</h3>
 65            <section>
 66                <header><h4>CSS</h4></header>
 67<pre class="sample">
 68a[href^="https://"] {
 69    font-weight: bold;
 70}
 71</pre>
 72                <header><h4>HTML</h4></header>
 73<pre>
 74&lt;a href="https://example.com"&gt;Secure Link (https)&lt;/a&gt;
 75&lt;a href="http://example.com"&gt;Non-Secure Link (http)&lt;/a&gt;
 76&lt;a href="https://another-example.com"&gt;Another Secure Link (https)&lt;/a&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <a href="https://example.com">Secure Link (https)</a>
 81                    <a href="http://example.com">Non-Secure Link (http)</a>
 82                    <a href="https://another-example.com">Another Secure Link (https)</a>
 83                </section>
 84            </section>
 85        </article>
 86        <article>
 87            <h3>element[attribute$=value] : $=</h3>
 88            <section>
 89                <header><h4>CSS</h4></header>
 90<pre class="sample">
 91img[src$=".jpg"] {
 92    border-radius: 10px;
 93}
 94</pre>
 95                <header><h4>HTML</h4></header>
 96<pre>
 97&lt;img src="image.jpg" alt="JPG Image" width="100"&gt;
 98&lt;img src="pattern.png" alt="PNG Image (no border radius)" width="100"&gt;
 99&lt;img src="example.jpg" alt="Another JPG Image" width="100"&gt;
100</pre>
101                <header><h4>HTML+CSS</h4></header>
102                <section class="sample-view">
103                    <img src="image.jpg" alt="JPG Image" width="100">
104                    <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105                    <img src="example.jpg" alt="Another JPG Image" width="100">
106                </section>
107            </section>
108        </article>
109        <article>
110            <h3>element[attribute*=value] : *=</h3>
111            <section>
112                <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115    background-color: yellow;
116}
117</pre>
118                <header><h4>HTML</h4></header>
119<pre>
120&lt;p class="highlight-text"&gt;This paragraph is highlighted.&lt;/p&gt;
121&lt;p class="normal-text"&gt;This paragraph is not highlighted.&lt;/p&gt;
122&lt;p class="text-highlight-important"&gt;This is another highlighted paragraph.&lt;/p&gt;
123</pre>
124                <header><h4>HTML+CSS</h4></header>
125                <section class="sample-view">
126                    <p class="highlight-text">This paragraph is highlighted.</p>
127                    <p class="normal-text">This paragraph is not highlighted.</p>
128                    <p class="text-highlight-important">This is another highlighted paragraph.</p>
129                </section>
130            </section>
131        </article>
132        <article>
133            <h3>element[attribute~=value] : ~=</h3>
134            <section>
135                <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138    border: 1px solid red;
139}
140</pre>
141                <header><h4>HTML</h4></header>
142<pre>
143&lt;div class="featured"&gt;This div is featured.&lt;/div&gt;
144&lt;div class="content featured"&gt;This div is also featured.&lt;/div&gt;
145&lt;div class="content"&gt;This div is not featured.&lt;/div&gt;
146</pre>
147                <header><h4>HTML+CSS</h4></header>
148                <section class="sample-view">
149                    <div class="featured">This div is featured.</div>
150                    <div class="content featured">This div is also featured.</div>
151                    <div class="content">This div is not featured.</div>
152                </section>
153            </section>
154        </article>
155        <article>
156            <h3>element[attribute|=value] : |=</h3>
157            <section>
158                <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161    font-style: italic;
162}
163</pre>
164                <header><h4>HTML</h4></header>
165<pre>
166&lt;p lang="en"&gt;This paragraph is in English.&lt;/p&gt;
167&lt;p lang="en-US"&gt;This paragraph is in American English.&lt;/p&gt;
168&lt;p lang="fr"&gt;Ce paragraphe est en français.&lt;/p&gt;
169</pre>
170                <header><h4>HTML+CSS</h4></header>
171                <section class="sample-view">
172                    <p lang="en">This paragraph is in English.</p>
173                    <p lang="en-US">This paragraph is in American English.</p>
174                    <p lang="fr">Ce paragraphe est en français.</p>
175                </section>
176            </section>
177        </article>
178
179        <article>
180            <h3>CSS Attribute Selector Example : input[required] &amp; input[placeholder]</h3>
181            <section>
182                <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185    background-color: #ffcccc;
186}
187
188input[placeholder] {
189    font-style: italic;
190    color: #999;
191}
192</pre>
193                <header><h4>HTML</h4></header>
194<pre>
195&lt;input type="text" required placeholder="Enter your name"&gt;
196&lt;input type="email" required placeholder="Enter your email"&gt;
197&lt;input type="text" placeholder="Optional field"&gt;
198</pre>
199                <header><h4>HTML+CSS</h4></header>
200                <section class="sample-view">
201                    <input type="text" required placeholder="Enter your name">
202                    <input type="email" required placeholder="Enter your email">
203                    <input type="text" placeholder="Optional field">
204                </section>
205            </section>
206        </article>
207        <article>
208            <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209            <section>
210                <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213    color: orange;
214}
215
216a[href^="https://"] {
217    color: green;
218}
219</pre>
220                <header><h4>HTML</h4></header>
221<pre>
222&lt;a href="http://example.com"&gt;HTTP Link&lt;/a&gt;
223&lt;a href="https://secure.example.com"&gt;HTTPS Link&lt;/a&gt;
224&lt;a href="/relative/path"&gt;Relative Link&lt;/a&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <a href="http://example.com">HTTP Link</a>
229                    <a href="https://secure.example.com">HTTPS Link</a>
230                    <a href="/relative/path">Relative Link</a>
231                </section>
232            </section>
233        </article>
234        <article>
235            <h3>Attribute Selectors</h3>
236            <section>
237                <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240    border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244    opacity: 0.5;
245}
246</pre>
247                <header><h4>HTML</h4></header>
248<pre>
249&lt;img src="pattern.png" alt="PNG Image" width="100"&gt;
250&lt;img src="document.jpg" alt="JPEG Image" width="100"&gt;
251</pre>
252                <header><h4>HTML+CSS</h4></header>
253                <section class="sample-view">
254                    <img src="pattern.png" alt="PNG Image" width="100">
255                    <img src="image.jpg" alt="JPEG Image" width="100">
256                </section>
257            </section>
258        </article>
259
260    </main>
261</body>
262</html>

CSS'teki Özellik Seçicilerinin Detayları

CSS özellik seçicileri, belirli özelliklere sahip HTML öğelerini seçmek için kullanılır. Bu, öğeleri özellik değerlerine göre stillendirmenizi sağlar. Şimdi, özellik seçicilerin temelinden ileri düzey kullanımına kadar adım adım açıklayacağız.

Özellik Seçicilerin Türleri ve Söz Dizimi

Farklı türlerde özellik seçiciler vardır. Burada, her bir seçici türünü detaylı bir şekilde inceleyeceğiz.

Bir Özelliğe Sahip Öğeleri Seçme 

1a[target] {
2    font-weight: bold;
3}
  • Özellik adını belirterek, belirtilen özelliğe sahip tüm öğeleri seçebilirsiniz.
  • Bu örnekte, target niteliğine sahip tüm <a> öğelerinin metni kalın yazılmıştır.

Belirli Bir Özellik Değerine Sahip Öğeleri Seçme 

1input[type="text"] {
2  border: 2px solid green;
3}
  • = kullanarak, özellik değeri belirli bir değerle tam olarak eşleşen öğeleri seçebilirsiniz.
  • Bu örnekte, type özelliği "text" olarak ayarlanmış tüm <input> öğelerine yeşil bir kenarlık uygulanacak.

Kısmi Özellik Değeri Eşleşmesine Sahip Öğeleri Seçme

Aşağıdaki üç seçiciyi kullanarak özellik değerlerinin kısmi eşleşmelerini belirtebilirsiniz.

  1. Başlangıç Eşleşmesi (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Özellik değerinin belirtilen dizeyle başladığı öğeleri seçer.
  • Bu örnekte, href özelliği "https://" ile başlayan tüm bağlantılar kalınlaştırılacak.
  1. Şununla Biten ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Öznitelik değeri belirtilen diziyle biten öğeleri seçer.
  • Bu örnekte, köşeleri yuvarlatan stiller, src özniteliği .jpg ile biten tüm resimlere uygulanır.
  1. İçeren (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Öznitelik değeri belirtilen dizgiyi içeren öğeleri seçer.
  • Bu örnekte, class özniteliği "highlight" içeren tüm <p> öğelerine sarı bir arka plan rengi uygulanır.

Öznitelik Değeri Bir Boşlukla Ayrılmış Kelime İçeren Öğelerin Seçilmesi (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= öznitelik değeri, boşluklarla ayrılmış kelimeler içinde belirli bir kelime içeriyorsa öğeleri seçer.
  • Bu örnekte, class özniteliği "featured" kelimesini içeren tüm <div> öğelerine kırmızı bir kenarlık uygulanır.

Öznitelik Değeri Kısa Çizgiyle Ayrılmış Bir Değerle Başlayan Öğelerin Seçilmesi (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= öznitelik değeri belirtilen diziyle eşleşirse veya kısa çizgiyle başlayan haliyle eşleşirse öğeleri seçer. Genellikle dil özniteliği (lang) ile kullanılır.
  • Bu örnekte, lang özniteliği "en" ile başlayan (örneğin "en" veya "en-US") tüm <p> öğelerine italik yazı stili uygulanır.

Pratik Örnekler ve Uygulamalar

Şimdi bazı pratik senaryolara bakalım.

Form Girdi Alanlarını Şekillendirme 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • Bu örnekte, required özniteliği olan tüm girdi alanlarına kırmızımsı bir arka plan rengi uygulanır ve placeholder özniteliği olan girdi alanlarının yer tutucu metni italik ve soluk bir renkle stilize edilir.
Bağlantı Protokollerine Göre Şekillendirme 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Burada, http:// ile başlayan bağlantılar turuncu hale getirilir ve https:// ile başlayan bağlantılar yeşil hale getirilir. Bu, güvenli ve güvensiz bağlantılar arasında görsel bir ayrım sağlar.
Görsel Formatlarına Göre Şekillendirme 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Bu örnekte, .png formatındaki görsellere mavi bir kenarlık eklenir ve .jpg formatındaki görsellerin saydamlığı %50 olarak ayarlanır.

Özet

CSS öznitelik seçicileri, HTML özniteliklerine dayalı olarak öğeleri seçmek için esnek ve güçlü bir yöntemdir. Bu seçicileri kullanmak daha spesifik stil uygulamalarına olanak tanır.

Bu makalede açıklanan temel söz dizimi ve uygulamalı örnekleri kullanarak daha gelişmiş bir stil oluşturmayı kolayca başarabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS'de KalıtımCSS'te Özel Karakterler ve Fonksiyonlar