Articles
CSS'e Giriş
CSS Pseudo-sınıflar ve Pseudo-elementler

CSS Pseudo-sınıflar ve Pseudo-elementler

Bu makale CSS pseudo-sınıflarını ve pseudo-elementlerini açıklar.

:hover gibi pseudo-sınıflar ve ::before gibi pseudo-elementler hakkında bilgi edinebilirsiniz.

YouTube Video

Önizleme için HTML

css-pseudo.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-pseudo-class.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Pseudo Class/Element</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>Pseudo Class</h2></header>
 19        <article>
 20            <h3>:hover</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a:hover {
 25    color: red;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29                <pre>&lt;a href="#"&gt;Example of hover&lt;/a&gt;</pre>
 30                <header><h4>HTML+CSS</h4></header>
 31                <section class="sample-view">
 32                    <a href="#">Example of hover</a><br>
 33                </section>
 34            </section>
 35        </article>
 36        <article>
 37            <h3>:focus</h3>
 38            <section>
 39                <header><h4>CSS</h4></header>
 40<pre class="sample">
 41input:focus {
 42    outline: 2px solid blue;
 43}
 44</pre>
 45                <header><h4>HTML</h4></header>
 46                <pre>&lt;input type="text" placeholder="Example of focus"&gt;</pre>
 47                <header><h4>HTML+CSS</h4></header>
 48                <section class="sample-view">
 49                    <input type="text" placeholder="Example of focus">
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>:active</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58button:active {
 59    background-color: green;
 60}
 61</pre>
 62                <header><h4>HTML</h4></header>
 63                <pre>&lt;button type="button"&gt;Example of active&lt;/button&gt;</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <button type="button">Example of active</button>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>:empty</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.box:empty {
 76    background-color: lightgray;
 77    border: 1px dashed black;
 78    height: 50px;
 79    width: 50px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;p class="box"&gt;&lt;/p&gt;
 85&lt;p class="box"&gt; &lt;/p&gt;
 86</pre>
 87                <header><h4>HTML+CSS</h4></header>
 88                <section class="sample-view">
 89                    <p class="box"></p>
 90                    <p class="box"> </p>
 91                </section>
 92            </section>
 93        </article>
 94        <article>
 95            <h3>:valid / :invalid</h3>
 96            <section>
 97                <header><h4>CSS</h4></header>
 98<pre class="sample">
 99input:valid {
100    border: 2px solid green;
101    background-color: #eaffea;
102}
103
104input:invalid {
105    border: 2px solid red;
106    background-color: #ffeaea;
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;form&gt;
112    &lt;label&gt;Username (min. 5 characters):&lt;/label&gt;
113    &lt;input type="text" pattern=".{5,}" required&gt;
114    &lt;button type="submit"&gt;Submit&lt;/button&gt;
115&lt;/form&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <form>
120                        <label>Username (min. 5 characters):</label>
121                        <input type="text" pattern=".{5,}" required>
122                        <button type="submit">Submit</button>
123                    </form>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>:in-range / :out-of-range</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132input[type="number"]:in-range {
133    border: 2px solid blue;
134    background-color: #eaf4ff;
135}
136
137input[type="number"]:out-of-range {
138    border: 2px solid orange;
139    background-color: #fff4e6;
140}
141</pre>
142                <header><h4>HTML</h4></header>
143<pre>
144&lt;form&gt;
145    &lt;label&gt;Age (between 18 and 99):&lt;/label&gt;
146    &lt;input type="number" min="18" max="99" required&gt;
147    &lt;button type="submit"&gt;Submit&lt;/button&gt;
148&lt;/form&gt;
149</pre>
150                <header><h4>HTML+CSS</h4></header>
151                <section class="sample-view">
152                    <form>
153                        <label>Age (between 18 and 99):</label>
154                        <input type="number" min="18" max="99" required>
155                        <button type="submit">Submit</button>
156                    </form>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>:nth-child(n)</h3>
162            <section>
163                <header><h4>CSS</h4></header>
164<pre class="sample">
165li:nth-child(2) {
166    color: blue;
167    font-weight: bold;
168}
169
170li:nth-child(odd) {
171    background-color: lightblue;
172}
173
174li:nth-child(even) {
175    background-color: steelblue;
176}
177</pre>
178                <header><h4>HTML</h4></header>
179<pre>
180&lt;ul&gt;
181    &lt;li&gt;First Item&lt;/li&gt;
182    &lt;li&gt;Second Item&lt;/li&gt;
183    &lt;li&gt;Third Item&lt;/li&gt;
184    &lt;li&gt;Fourth Item&lt;/li&gt;
185&lt;/ul&gt;
186</pre>
187                <header><h4>HTML+CSS</h4></header>
188                <section class="sample-view">
189                    <ul>
190                        <li>First Item</li>
191                        <li>Second Item</li>
192                        <li>Third Item</li>
193                        <li>Fourth Item</li>
194                    </ul>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>:first-child</h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203small:first-child {
204    font-weight: bold;
205    color: steelblue;
206}
207</pre>
208                <header><h4>HTML</h4></header>
209<pre>
210    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
211    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
212    &lt;small&gt;Third Small Text&lt;/small&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <small>First Small Text</small><br>
217                    <small>Second Small Text</small><br>
218                    <small>Third Small Text</small>
219                </section>
220            </section>
221        </article>
222        <article>
223            <h3>:last-child</h3>
224            <section>
225                <header><h4>CSS</h4></header>
226<pre class="sample">
227small:last-child {
228    font-weight: bold;
229    color: seagreen;
230}
231</pre>
232                <header><h4>HTML</h4></header>
233<pre>
234    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
235    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
236    &lt;small&gt;Third Small Text&lt;/small&gt;
237</pre>
238                <header><h4>HTML+CSS</h4></header>
239                <section class="sample-view">
240                    <small>First Small Text</small><br>
241                    <small>Second Small Text</small><br>
242                    <small>Third Small Text</small>
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>:has()</h3>
248            <section>
249                <header><h4>CSS</h4></header>
250<pre class="sample">
251p:has(span.child) {
252    border: 2px solid black;
253}
254</pre>
255                <header><h4>HTML</h4></header>
256<pre>
257&lt;p&gt;Paragraph with &lt;span class="child"&gt;span element&lt;/span&gt;&lt;/p&gt;
258&lt;p&gt;Paragraph without span element&lt;/p&gt;
259</pre>
260                <header><h4>HTML+CSS</h4></header>
261                <section class="sample-view">
262                    <p>Paragraph with <span class="child">span element</span></p>
263                    <p>Paragraph without span element</p>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>:not()</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272q:not(.quote2) {
273    font-weight: bold;
274    color: steelblue;
275}
276</pre>
277                <header><h4>HTML</h4></header>
278<pre>
279    &lt;q class="quote1"&gt;First Quote&lt;/q&gt;&lt;br&gt;
280    &lt;q class="quote2"&gt;Second Quote&lt;/q&gt;&lt;br&gt;
281    &lt;q class="quote3"&gt;Third Quote&lt;/q&gt;
282</pre>
283                <header><h4>HTML+CSS</h4></header>
284                <section class="sample-view">
285                    <q class="quote1">First Quote</q><br>
286                    <q class="quote2">Second Quote</q><br>
287                    <q class="quote3">Third Small Text</q>
288                </section>
289            </section>
290        </article>
291        <article>
292            <h3>:where() / :is()</h3>
293            <section>
294                <header><h4>CSS</h4></header>
295<pre class="sample">
296:where(p, .detail) span {
297    color: darkcyan;
298    text-decoration: line-through;
299}
300:is(p, .detail) span {
301    font-style: italic;
302}
303p span {
304    text-decoration: none; /* Applied */
305    font-style: normal; /* Not Applied */
306}
307</pre>
308                <header><h4>HTML</h4></header>
309<pre>
310&lt;p class="detail"&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; with the "detail" class.&lt;/p&gt;
311&lt;p&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; without the "detail" class.&lt;/p&gt;
312</pre>
313                <header><h4>HTML+CSS</h4></header>
314                <section class="sample-view">
315                    <p class="detail">This is a <span>paragraph</span> with the "detail" class.</p>
316                    <p>This is a <span>paragraph</span> without the "detail" class.</p>
317                </section>
318            </section>
319        </article>
320        <article>
321            <h3>:checked</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325input:checked {
326    outline: 4px solid red;
327}
328</pre>
329                <header><h4>HTML</h4></header>
330<pre>
331    &lt;label&gt;&lt;input type="checkbox"&gt;First Checkbox&lt;/label&gt;
332    &lt;label&gt;&lt;input type="checkbox"&gt;Second Checkbox&lt;/label&gt;
333</pre>
334                <header><h4>HTML+CSS</h4></header>
335                <section class="sample-view">
336                    <label><input type="checkbox">First Checkbox</label>
337                    <label><input type="checkbox">Second Checkbox</label>
338                </section>
339            </section>
340        </article>
341        <article>
342            <h3>:disabled</h3>
343            <section>
344                <header><h4>CSS</h4></header>
345<pre class="sample">
346button:disabled {
347    background-color: gray;
348    cursor: not-allowed;
349}
350</pre>
351                <header><h4>HTML</h4></header>
352                <pre>&lt;button type="button" disabled&gt;Example of active&lt;/button&gt;</pre>
353                <header><h4>HTML+CSS</h4></header>
354                <section class="sample-view">
355                    <button type="button" disabled>Example of active</button>
356                </section>
357            </section>
358        </article>
359        <article>
360            <h3>:visited</h3>
361            <section>
362                <header><h4>CSS</h4></header>
363<pre class="sample">
364.link:visited {
365    color: purple;
366}
367</pre>
368                <header><h4>HTML</h4></header>
369                <pre>&lt;a href="https://example.com" class="link"&gt;Example&lt;/a&gt;</pre>
370                <header><h4>HTML+CSS</h4></header>
371                <section class="sample-view">
372                    <a href="https://example.com" class="link">Example</a>
373                </section>
374            </section>
375        </article>
376        <article>
377            <h3>:first-of-type</h3>
378            <section>
379                <header><h4>CSS</h4></header>
380<pre class="sample">
381.first-example :first-of-type {
382    font-weight: bold;
383    color: steelblue;
384}
385</pre>
386                <header><h4>HTML</h4></header>
387<pre>
388&lt;p class="first-example"&gt;
389    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
390    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
391    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
392&lt;/p&gt;
393</pre>
394                <header><h4>HTML+CSS</h4></header>
395                <section class="sample-view">
396                    <p class="first-example">
397                        <var>First Variable</var>, <code>First Code Snippet</code><br>
398                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
399                        <var>Third Variable</var>, <code>Third Code Snippet</code>
400                    </p>
401                </section>
402            </section>
403        </article>
404        <article>
405            <h3>:last-of-type</h3>
406            <section>
407                <header><h4>CSS</h4></header>
408<pre class="sample">
409.last-example :last-of-type {
410    font-weight: bold;
411    color: seagreen;
412}
413</pre>
414                <header><h4>HTML</h4></header>
415<pre>
416&lt;p class="last-example"&gt;
417    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
418    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
419    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
420&lt;/p&gt;
421</pre>
422                <header><h4>HTML+CSS</h4></header>
423                <section class="sample-view">
424                    <p class="last-example">
425                        <var>First Variable</var>, <code>First Code Snippet</code><br>
426                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
427                        <var>Third Variable</var>, <code>Third Code Snippet</code>
428                    </p>
429                </section>
430            </section>
431        </article>
432        <article>
433            <h3>:nth-of-type(n)</h3>
434            <section>
435                <header><h4>CSS</h4></header>
436<pre class="sample">
437.nth-example :nth-of-type(2) {
438    font-weight: bold;
439    color: lightsalmon;
440}
441</pre>
442                <header><h4>HTML</h4></header>
443<pre>
444&lt;p class="nth-example"&gt;
445    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
446    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
447    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
448&lt;/p&gt;
449</pre>
450                <header><h4>HTML+CSS</h4></header>
451                <section class="sample-view">
452                    <p class="nth-example">
453                        <var>First Variable</var>, <code>First Code Snippet</code><br>
454                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
455                        <var>Third Variable</var>, <code>Third Code Snippet</code>
456                    </p>
457                </section>
458            </section>
459        </article>
460
461        <header><h2>Pseudo Element</h2></header>
462        <article>
463            <h3>::before</h3>
464            <section>
465                <header><h4>CSS</h4></header>
466<pre class="sample">
467span.note::before {
468    content: "Note: ";
469    color: red;
470}
471</pre>
472                <header><h4>HTML</h4></header>
473                <pre>&lt;span class="note"&gt;Example Text&lt;/span&gt;</pre>
474                <header><h4>HTML+CSS</h4></header>
475                <section class="sample-view">
476                    <span class="note">Example Text</a><br>
477                </section>
478            </section>
479        </article>
480        <article>
481            <h3>::after</h3>
482            <section>
483                <header><h4>CSS</h4></header>
484<pre class="sample">
485span.five-stars::after {
486    content: "*****";
487    color: gold;
488}
489</pre>
490                <header><h4>HTML</h4></header>
491                <pre>&lt;span class="five-stars"&gt;Example Text&lt;/span&gt;</pre>
492                <header><h4>HTML+CSS</h4></header>
493                <section class="sample-view">
494                    <span class="five-stars">Example Text</a>
495                </section>
496            </section>
497        </article>
498        <article>
499            <h3>::placeholder</h3>
500            <section>
501                <header><h4>CSS</h4></header>
502<pre class="sample">
503input::placeholder {
504    color: rgba(0, 150, 150, 0.7);
505    font-size: 14px;
506    font-style: italic;
507}
508</pre>
509                <header><h4>HTML</h4></header>
510                <pre>&lt;input type="text" placeholder="Enter your name"&gt;</pre>
511                <header><h4>HTML+CSS</h4></header>
512                <section class="sample-view">
513                    <input type="text" placeholder="Enter your name">
514                </section>
515            </section>
516        </article>
517        <article>
518            <h3>::first-letter</h3>
519            <section>
520                <header><h4>CSS</h4></header>
521<pre class="sample">
522p.first::first-letter {
523    font-size: 2em;
524    color: blue;
525}
526</pre>
527                <header><h4>HTML</h4></header>
528<pre>
529&lt;p class="first"&gt;
530    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
531    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
532    &lt;span&gt;Third Text&lt;/span&gt;
533&lt;/p&gt;
534</pre>
535                <header><h4>HTML+CSS</h4></header>
536                <section class="sample-view">
537                    <p class="first">
538                        <span>First Text</span><br>
539                        <span>Second Text</span><br>
540                        <span>Third Text</span>
541                    </p>
542                </section>
543<pre class="sample-error">
544/* Not Valid: `::first-letter` can only be applied to
545              block-level elements */
546span::first-letter {
547    font-size: 2em;
548    color: red;
549}
550</pre>
551            </section>
552        </article>
553        <article>
554            <h3>::first-line</h3>
555            <section>
556                <header><h4>CSS</h4></header>
557<pre class="sample">
558p.second::first-line {
559    font-weight: bold;
560    color: green;
561}
562</pre>
563                <header><h4>HTML</h4></header>
564<pre>
565&lt;p class="second"&gt;
566    First Text&lt;br&gt;
567    Second Text&lt;br&gt;
568    Third Text
569&lt;/p&gt;
570</pre>
571                <header><h4>HTML+CSS</h4></header>
572                <section class="sample-view">
573                    <p class="second">
574                        First Text<br>
575                        Second Text<br>
576                        Third Text
577                    </p>
578                </section>
579<pre class="sample-error">
580/* Not Valid: `::first-line` can only be applied to block-level elements */
581span::first-line {
582    font-size: 2em;
583    color: red;
584}
585</pre>
586            </section>
587        </article>
588        <article>
589            <h3>::selection</h3>
590            <section>
591                <header><h4>CSS</h4></header>
592<pre class="sample">
593span::selection {
594    background-color: yellow;
595    color: black;
596}
597</pre>
598                <header><h4>HTML</h4></header>
599<pre>
600&lt;p&gt;
601    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
602    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
603    &lt;span&gt;Third Text&lt;/span&gt;
604&lt;/p&gt;
605</pre>
606                <header><h4>HTML+CSS</h4></header>
607                <section class="sample-view">
608                    <p>
609                        <span>First Text</span><br>
610                        <span>Second Text</span><br>
611                        <span>Third Text</span>
612                    </p>
613                </section>
614            </section>
615        </article>
616    </main>
617</body>
618</html>

Pseudo-sınıflar

CSS pseudo-sınıflar, öğe durumları veya hiyerarşi gibi belirli koşullara göre stilleri öğelere uygulayan fonksiyonlardır. Bunlar, öğe durumlarına veya pozisyonlarına dayanarak özel stiller eklemenizi sağlar ve bu da, normal sınıflar veya kimliklerle belirtilemeyen dinamik durumları temsil etmek için kullanışlıdır. Pseudo-sınıflar, belirli koşullara dayalı olarak dinamik kullanıcı arayüzlerini ve stilleri uygulamayı kolaylaştırır ve kullanıcı etkileşimine veya içerik yapısına yanıt veren bir tasarım sağlar.

Pseudo-sınıfların Temel Sözdizimi

Pseudo-sınıfların temel sözdizimi aşağıdaki gibidir.

1selector:pseudo-class {
2    /* Styles */
3}
  • seçici (selector) hedef öğedir.
  • pseudo-sınıf kısmı, belirli bir durum veya koşulu gösteren bir pseudo-sınıfı temsil eder.
  • Pseudo-sınıfları seçmek için : kullanılır.

Sık Kullanılan Pseudo-sınıflar

:hover 

1a:hover {
2    color: red;
3}
  • :hover, fare imleci bir öğe üzerinde gezinirken stilleri uygular.
  • Bu örnekte, fare bir bağlantının üzerine geldiğinde metin rengi kırmızıya döner.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus, bir öğe odaklandığında stilleri uygular. Genellikle form öğeleri ve bağlantılar için kullanılır.
  • Bu örnekte, bir input öğesi odaklandığında mavi bir çerçeve görünür.

:active 

1button:active {
2    background-color: green;
3}
  • :active, bir öğenin aktif olduğu zaman (tıklanırken) stilleri uygular.
  • Bu örnekte, düğmeye tıklanırken arka plan rengi yeşile dönüyor.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • :empty pseudo-sınıfı, çocuğu olmayan öğelere stil uygulamak için kullanılır. Hedef öğe, metin düğümleri, boşluk veya yorum içermemelidir.
  • Bu örnekte, box sınıfına sahip bir öğe hiçbir şey içermiyorsa o öğeye gri bir arka plan ve siyah kesik çizgili bir kenarlık uygulanır. Eğer boşluk varsa, stil uygulanmaz.

:valid / :invalid 

1input:valid {
2    border: 2px solid green;
3    background-color: #eaffea;
4}
5
6input:invalid {
7    border: 2px solid red;
8    background-color: #ffeaea;
9}

  • :valid, geçerli giriş değerlerine sahip form öğelerine uygulanan bir stildir. :valid stili, pattern veya type (ör. email) gibi HTML özellikleriyle belirtilen koşullar karşılandığında uygulanır.

  • :invalid, geçersiz giriş değerlerine sahip form öğelerine uygulanan bir stildir. :invalid stili, bir form öğesi HTML doğrulama kurallarını karşılamadığında (ör. type="email") uygulanır.

  • Bu örnekte, girilen metin pattern özelliği ile belirtildiği gibi 5 veya daha fazla karakter uzunluğunda ise yeşil bir kenarlık görüntülenir. Girilen metin 5 karakterden kısa ise kırmızı bir kenarlık görüntülenir.

:in-range / :out-of-range 

1input[type="number"]:in-range {
2    border: 2px solid blue;
3    background-color: #eaf4ff;
4}
5
6input[type="number"]:out-of-range {
7    border: 2px solid orange;
8    background-color: #fff4e6;
9}

  • :in-range, sayısal bir giriş öğesi belirtilen aralık içinde bir değer içerdiğinde uygulanan bir stildir. :in-range stili, HTML'deki min ve max özniteliklerinde belirtilen koşullar karşılandığında uygulanır.

  • :out-of-range, sayısal bir giriş öğesi belirtilen aralık dışında bir değer içerdiğinde uygulanan bir stildir. :out-of-range stili, değer min veya max öznitelikleriyle belirtilen aralığı aştığında uygulanır.

  • Bu örnekte, min="18" ve max="99" öznitelikleriyle belirtilen aralıkta (18 ile 99 dahil) bir değer girildiğinde, mavi bir kenarlık görüntülenir. Aralığın dışında bir değer girildiğinde, turuncu bir kenarlık görüntülenir.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() bir ana öğe içindeki bir alt öğenin konumuna göre stiller uygular. n için bir sayı veya ifade belirtebilirsiniz.
  • Bu örnekte, ikinci liste öğesinin metni mavi olur.
Tek ve Çift Öğelere Uygulama 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • even veya odd belirterek, tek veya çift öğelere stil uygulayabilirsiniz.
  • Bu örnekte, çift ve tek satırlara farklı arka plan renkleri uygulanır. Örneğin, çizgili tablo tasarımları için kullanılabilir.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child, bir ana öğenin ilk alt öğesine stiller uygular.
  • Bu örnekte, ilk small öğesinin metni mavi bir tonla kalın olarak biçimlendirilir.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child, bir ana öğenin son alt öğesine stiller uygular.
  • Bu örnekte, son small öğesinin metni yeşil bir tonla kalın olarak biçimlendirilir.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • CSS'de :has() pseudo-sınıfı bir ebeveyn seçici olarak işlev görür. Bu pseudo-sınıfı kullanarak bir alt öğenin varlığına göre bir ebeveyn öğesini seçebilirsiniz.
  • Bu örnekte, border, .child sınıfına sahip span elemanlarını içeren p elemanlarına uygulanır.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() belirli koşulları sağlamayan öğelere stiller uygular.
  • Bu örnekte, quote2 sınıfına sahip olanlar hariç q öğelerinin metni mavi bir tonla kalın olarak biçimlendirilir.

:where() / :is() 

 1:where(p, .detail) span {
 2    color: darkcyan;
 3    text-decoration: line-through;
 4}
 5:is(p, .detail) span {
 6    font-style: italic;
 7}
 8p span {
 9    text-decoration: none; /* Applied */
10    font-style: normal; /* Not Applied */
11}
  • :where() pseudo-sınıfı, özgüllüğü sıfıra ayarlayan özel bir CSS seçicisidir. Bu, birden fazla seçiciyi toplu olarak ele almak ve seçilen öğelerin özgüllüğünü etkilemeden stiller uygulamak istediğinizde kullanışlıdır.
  • :is() pseudo-sınıfı, birden fazla seçiciyi gruplayarak herhangi bir koşulu karşılayan öğeleri seçer. :is() pseudo-sınıfı, normal seçicilerle aynı özgüllüğe sahiptir, ancak iç seçicileri arasındaki en yüksek özgüllüğe göre stiller uygular.
  • Bu örnekte, :where() ve :is() seçicileri, detail sınıfının içindeki <p> ve <span> öğelerine stil uygulamak için kullanılmıştır. :where() ile belirlenen text-decoration stili, sonraki CSS ile geçersiz kılınabilir. Ancak, :is() ile belirlenen stil daha yüksek bir özgüllüğe (specificity) sahiptir ve sonraki CSS ile geçersiz kılınmaz.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked, bir onay kutusu veya radyo düğmesi seçildiğinde stilleri uygular.
  • Bu örnekte, seçili giriş (input) öğesine kırmızı bir kenarlık uygulanır.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled, devre dışı bırakılmış form öğelerine stiller uygular.
  • Bu örnekte, devre dışı bırakılmış düğmeye gri bir arka plan ve 'yasak' işaretini gösteren bir imleç uygulanır.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited, ziyaret edilmiş bağlantılara stil uygulamak için kullanılır.
  • Bu örnekte, bir bağlantıya tıklandıktan ve ziyaret edildikten sonra <a> öğesinin metin rengi mora döner.
Gizlilik ve Stil Kısıtlamaları

:visited, gizlilik koruma nedenleriyle bazı stil kısıtlamalarına sahiptir. Bu, dış sitelerin kullanıcının ziyaret geçmişini çıkarmasını engeller. :visited ile değiştirilebilen özellikler aşağıdakilerle sınırlıdır:.

color
background-color
border-color
outline-color
column-rule-color
text-decoration-color
fill
stroke

Öte yandan, bunların dışındaki özellikler (örneğin, display, visibility, position, vb.) :visited ile değiştirilemez. Bu, ziyaret geçmişi yoluyla kullanıcı gizliliğinin sızdırılmasını önler.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type, ana öğesi içinde aynı etiket adına sahip ilk öğeyi seçer.
  • Bu örnekte, first-example sınıfındaki ilk <var> ve <code> öğelerinin metni kalın mavi stilde biçimlendirilmiştir.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type, ana öğesi içinde aynı etiket adına sahip son öğeyi seçer.
  • Bu örnekte, last-example sınıfındaki son <var> ve <code> öğelerinin metni kalın yeşil stilde biçimlendirilmiştir.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type(), aynı türdeki öğelerin n. (belirtilen sıra) öğesine stil uygular.
  • Bu örnekte, nth-example sınıfındaki ikinci <var> ve <code> öğelerinin metni kalın turuncu stilde biçimlendirilmiştir.

Pseudo-elementler

CSS'teki pseudo-elementler, seçilen öğenin belirli kısımlarına stil uygulamak için kullanılır. Pseudo-class'lardan farklı olarak, pseudo-elementler tüm öğe yerine sadece belirli bir kısmına odaklanır. Örneğin, bunlar bir öğeden önce veya sonra içerik eklemek ya da belirli karakterlere veya satırlara stil uygulamak için kullanılır.

Pseudo-elementlerin Temel Sözdizimi

Pseudo-elementler genellikle seçicinin ardından :: (çift nokta) ile yazılır. Bu, onları pseudo-sınıflardan ayırt etmek içindir.

1selector::pseudo-element {
2    /* Styles */
3}
  • seçici (selector) hedef öğedir.
  • pseudo-element kısmı, bir öğenin belirli bir kısmına veya yönüne atıfta bulunan bir pseudo-elementi temsil eder.
  • :: kullanarak bir pseudo-element belirtebilirsiniz.

Yaygın Olarak Kullanılan Pseudo-elementler

::before 

1span.note::before {
2    content: "Note: ";
3    color: red;
4}

  • ::before, bir öğenin içeriğinden önce sanal içerik ekler ve bu kısma stil uygular. Örneğin, simgeler veya etiketler eklemek için kullanışlıdır.

  • Bu örnekte, "Note:" metni, note sınıfına sahip <span> öğelerinin önüne eklenir. Burada belirtilen içerik, gerçek HTML'de mevcut değildir; CSS aracılığıyla sanal olarak eklenir. Bu, JavaScript vb. aracılığıyla eklenen içeriği doğrudan manipüle edemeyeceğiniz anlamına gelir.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after, bir öğenin içeriğinden sonra sanal içerik ekler. Genellikle bir öğeden sonra tamamlayıcı veya dekoratif içerik eklemek için kullanılır.
  • Bu örnekte, five-stars sınıfına sahip <span> öğesinin sonrasına altın bir yıldız simgesi eklenir.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • ::placeholder pseudo-elementi, form öğelerindeki placeholder metnini stillendirmek için kullanılır. Varsayılan olarak, genellikle açık gri metinle görüntülenir, ancak ::placeholder pseudo-elementi ile stili tasarımınıza uygun şekilde değiştirebilirsiniz.
  • Bu örnekte, input öğesi için placeholder metin rengi %70 şeffaf mavi, yazı tipi boyutu 14px ve italik olarak ayarlanmıştır.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter, bir blok düzeyindeki öğenin ilk harfine stil uygular. Daha büyük veya vurgulanmış ilk harfin kullanıldığı bir dergi veya gazetedekine benzer tipografik efektler için kullanılır. Bu pseudo-elementin yalnızca blok düzeyinde öğelerde etkili olduğunu ve <span> gibi satır içi öğelere doğrudan uygulanamayacağını unutmayın.
  • Bu örnekte, paragrafın ilk harfi iki kat büyük, kalın ve mavi olacak.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line, bir blok öğesinin ilk satırına stil uygular. Özellikle metin paragrafları için kullanılır ve ilk satıra farklı stiller uygulamanıza olanak tanır.
  • Bu örnekte, paragrafın ilk satırı kalın ve yeşil olacaktır.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection kullanıcının seçtiği (vurguladığı) metin kısmına stiller uygular. Bu özellik ile, metin seçildiğinde arka plan rengini ve metin rengini değiştirebilirsiniz.
  • Bu örnekte, bir <span> öğesinin metni seçildiğinde, arka plan sarı ve metin siyah olur.

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'te Özel Karakterler ve FonksiyonlarCSS `@` Kuralları