Articles
Wprowadzenie do CSS
Pseudoklasy i pseudoelementy CSS

Pseudoklasy i pseudoelementy CSS

Ten artykuł wyjaśnia pseudoklasy i pseudoelementy CSS.

Możesz dowiedzieć się o pseudoklasach, takich jak :hover, i pseudoelementach, takich jak ::before.

YouTube Video

HTML do podglądu

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>

Pseudoklasy

Pseudoklasy CSS to funkcje, które stosują style do elementów na podstawie określonych warunków, takich jak stany elementów lub hierarchia. Pozwalają na dodanie specjalnych stylów na podstawie stanów lub pozycji elementów, co przydaje się do reprezentowania dynamicznych sytuacji, które nie mogą być określone za pomocą zwykłych klas lub identyfikatorów. Pseudoklasy ułatwiają implementację dynamicznych interfejsów użytkownika oraz stylowanie na podstawie określonych warunków, umożliwiając projektowanie reagujące na interakcje użytkownika lub strukturę treści.

Podstawowa składnia pseudoklas

Podstawowa składnia pseudoklas wygląda następująco.

1selector:pseudo-class {
2    /* Styles */
3}
  • selektor to element docelowy.
  • pseudo-klasa oznacza specyficzny stan lub warunek.
  • : służy do wybierania pseudoklas.

Najczęściej używane pseudoklasy

:hover 

1a:hover {
2    color: red;
3}
  • :hover stosuje style, gdy kursor myszy najeżdża na element.
  • W tym przykładzie, gdy kursor myszy najeżdża na link, kolor tekstu zmienia się na czerwony.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus stosuje style, gdy element otrzymuje fokus. Głównie stosowane dla elementów formularza i linków.
  • W tym przykładzie, gdy element input otrzymuje fokus, pojawia się niebieski obrys.

:active 

1button:active {
2    background-color: green;
3}
  • :active stosuje style do elementu, gdy jest aktywny (gdy jest klikany).
  • W tym przykładzie, podczas klikania przycisku, kolor tła zmienia się na zielony.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • Pseudo-klasa :empty jest używana do stosowania stylów do elementów, które nie mają dzieci. Element docelowy nie może zawierać węzłów tekstowych, spacji ani komentarzy.
  • W tym przykładzie, jeśli element z klasą box nie zawiera niczego, stosowane jest szare tło i czarny przerywany obramowanie dla tego elementu. Jeśli występuje spacja, styl nie jest stosowany.

: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 to styl stosowany do elementów formularza z poprawnymi wartościami wejściowymi. Styl :valid jest stosowany, gdy są spełnione warunki określone przez atrybuty HTML, takie jak pattern lub type (np. email).

  • :invalid to styl stosowany do elementów formularza z niepoprawnymi wartościami wejściowymi. Styl :invalid jest stosowany, gdy element formularza nie spełnia zasad walidacji HTML (np. type="email").

  • W tym przykładzie, zielona ramka jest wyświetlana, jeśli wprowadzony tekst ma 5 lub więcej znaków, zgodnie z atrybutem pattern. Jeśli wprowadzony tekst ma mniej niż 5 znaków, wyświetlana jest czerwona ramka.

: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 to styl stosowany, gdy element wejściowy numeryczny zawiera wartość w określonym zakresie. Styl :in-range jest stosowany, gdy spełnione są warunki określone przez atrybuty min i max w HTML.

  • :out-of-range to styl stosowany, gdy element wejściowy numeryczny zawiera wartość poza określonym zakresem. Styl :out-of-range jest stosowany, gdy wartość przekracza zakres określony przez atrybuty min lub max.

  • W tym przykładzie, gdy zostanie wprowadzona wartość mieszcząca się w zakresie określonym przez atrybuty min="18" i max="99" (od 18 do 99 włącznie), wyświetlana jest niebieska ramka. Gdy zostanie wprowadzona wartość poza zakresem, wyświetlana jest pomarańczowa ramka.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() stosuje style w oparciu o pozycję elementu potomnego w jego elemencie nadrzędnym. Możesz określić liczbę lub wyrażenie dla n.
  • W tym przykładzie tekst drugiego elementu listy staje się niebieski.
Stosowanie do nieparzystych i parzystych elementów 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Określając even lub odd, możesz stosować style do parzystych lub nieparzystych elementów.
  • W tym przykładzie różne kolory tła są stosowane do parzystych i nieparzystych wierszy. Może to być użyte na przykład do projektowania tabel w paski.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child stosuje style do pierwszego elementu potomnego w elemencie nadrzędnym.
  • W tym przykładzie tekst pierwszego elementu small jest pogrubiony i ma odcień niebieskiego.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child stosuje style do ostatniego elementu potomnego w elemencie nadrzędnym.
  • W tym przykładzie tekst ostatniego elementu small jest pogrubiony i ma odcień zielonego.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Pseudo-klasa :has() w CSS działa jako selektor rodzica. Korzystając z tej pseudo-klasy, możesz wybrać element rodzica na podstawie obecności elementów potomnych.
  • W tym przykładzie border jest zastosowany do elementów p, które zawierają elementy span z klasą .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() stosuje style do elementów, które nie spełniają określonych warunków.
  • W tym przykładzie tekst elementów q, z wyjątkiem tych z klasą quote2, jest pogrubiony i ma odcień niebieskiego.

: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}
  • Pseudo-klasa :where() to specjalny selektor CSS, który ustawia specyficzność na zero. Jest to przydatne, gdy chcesz obsłużyć wiele selektorów jednocześnie i zastosować style bez wpływu na specyficzność wybranych elementów.
  • Pseudo-klasa :is() grupuje wiele selektorów i wybiera elementy pasujące do dowolnego z warunków. Sama pseudo-klasa :is() ma taką samą specyficzność jak zwykłe selektory, ale stosuje style w oparciu o najwyższą specyficzność wśród swoich wewnętrznych selektorów.
  • W tym przykładzie :where() i :is() są używane do stosowania stylów do elementów <p> i <span> w klasie detail. Styl text-decoration ustawiony przez :where() jest nadpisywany przez późniejszy CSS. Natomiast styl ustawiony przez :is() ma wyższą specyficzność i nie jest nadpisywany przez późniejszy CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked stosuje style, gdy zaznaczony jest checkbox lub przycisk radiowy.
  • W tym przykładzie na zaznaczonym elemencie input jest wyświetlana czerwona obwódka.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled stosuje style do wyłączonych elementów formularza.
  • W tym przykładzie wyłączony przycisk ma zastosowane szare tło oraz kursor 'not-allowed'.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited jest używane do stosowania stylów do odwiedzonych linków.
  • W tym przykładzie po kliknięciu i odwiedzeniu linku kolor tekstu elementu <a> zmienia się na fioletowy.
Prywatność i ograniczenia stylów

:visited ma pewne ograniczenia stylów ze względu na ochronę prywatności. To zapobiega zewnętrznym witrynom wnioskowaniu na temat historii odwiedzin użytkownika. Właściwości, które można zmieniać za pomocą :visited, ograniczone są do następujących:.

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

Z drugiej strony, właściwości inne niż te (np. display, visibility, position itp.) nie mogą być zmieniane za pomocą :visited. To zapobiega wyciekowi prywatności użytkownika poprzez historię odwiedzin.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type wybiera pierwszy element danego typu (o tej samej nazwie tagu) wewnątrz elementu nadrzędnego.
  • W tym przykładzie tekst pierwszego elementu <var> i <code> w klasie first-example ma styl pogrubiony i niebieski.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type wybiera ostatni element danego typu wewnątrz elementu nadrzędnego.
  • W tym przykładzie tekst ostatniego elementu <var> i <code> w klasie last-example ma styl pogrubiony i zielony.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() stosuje style do n-tego wystąpienia elementów tego samego typu.
  • W tym przykładzie tekst drugiego elementu <var> i <code> w klasie nth-example ma styl pogrubiony i pomarańczowy.

Pseudo-elementy

Pseudo-elementy w CSS są używane do stosowania stylów do określonych części wybranego elementu. W przeciwieństwie do pseudo-klas, pseudo-elementy koncentrują się na określonych częściach elementu, a nie na całym elemencie. Na przykład są używane do dodawania treści przed lub po elemencie lub do stosowania stylów dla określonych znaków lub linii.

Podstawowa składnia pseudoelementów

Pseudoelementy są zwykle zapisywane za pomocą :: (dwukropek) po selektorze. Ma to na celu odróżnienie ich od pseudoklas.

1selector::pseudo-element {
2    /* Styles */
3}
  • selektor to element docelowy.
  • Część pseudo-element oznacza pseudoelement, który odnosi się do określonej części lub aspektu elementu.
  • Możesz określić pseudoelement, używając ::.

Najczęściej używane pseudoelementy

::before 

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

  • ::before wstawia wirtualną treść przed treścią elementu i stosuje styl do tej części. Jest to przydatne na przykład do wstawiania ikon lub etykiet.

  • W tym przykładzie tekst „Notatka:” jest wstawiany przed elementami <span> z klasą note. Treść określona tutaj nie istnieje w rzeczywistym HTML; jest dodawana wirtualnie za pomocą CSS. Oznacza to, że nie można bezpośrednio manipulować treścią dodaną za pomocą JavaScript itp.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after wstawia wirtualną treść po treści elementu. Zazwyczaj jest używany do dodawania uzupełniającej lub dekoracyjnej zawartości po elemencie.
  • W tym przykładzie ikona złotej gwiazdy jest dodawana po elemencie <span> z klasą five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Pseudoelement ::placeholder służy do stylizacji tekstu zastępczego w elementach formularza. Domyślnie jest wyświetlany w jasnoszarym tekście, ale za pomocą pseudoelementu ::placeholder możesz zmienić styl, aby pasował do twojego projektu.
  • W tym przykładzie kolor tekstu zastępczego dla elementu input jest ustawiony na 70% przezroczysty niebieski, rozmiar czcionki to 14px, a tekst pochylony.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter stosuje styl do pierwszej litery elementu blokowego. Służy do efektów typograficznych, takich jak te widoczne w czasopismach lub gazetach, gdzie pierwsza litera jest podkreślona. Zwróć uwagę, że ten pseudoelement działa tylko na elementach blokowych i nie można go bezpośrednio zastosować do elementów liniowych, takich jak <span>.
  • W tym przykładzie pierwsza litera akapitu będzie dwa razy większa, pogrubiona i niebieska.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line stosuje styl do pierwszej linii elementu blokowego. Jest to szczególnie używane w przypadku akapitów tekstowych, umożliwiając zastosowanie różnych stylów do pierwszej linii.
  • W tym przykładzie pierwsza linia akapitu będzie pogrubiona i zielona.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection stosuje style do części tekstu wybranego (podświetlonego) przez użytkownika. Dzięki temu można zmienić kolor tła i kolor tekstu, gdy tekst jest wybrany.
  • W tym przykładzie, gdy zostanie wybrany tekst elementu <span>, tło stanie się żółte, a tekst czarny.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Znaki specjalne i funkcje w CSSReguły CSS `@`