diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/css/_colon_first-child | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pl/web/css/_colon_first-child')
-rw-r--r-- | files/pl/web/css/_colon_first-child/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/files/pl/web/css/_colon_first-child/index.html b/files/pl/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..25e81d027e --- /dev/null +++ b/files/pl/web/css/_colon_first-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:first-child' +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pseudoklasa <code>:first-child</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. <code>:first-child</code> ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":first-node") }}. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">selektor:first-child { własności } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> +<pre class="eval">span:first-child { font-weight: bold; } +</pre> +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "<b>pierwszy</b>": </p> +<ol><li> W pierwszym przypadku span o id <code>first</code> jest pierwszym dzieckiem elementu <code>body</code> +</li><li> W drugim przypadku span o id <code>dfirst</code> jest pierwszym dzieckiem elementu <code>div</code> +</li></ol> +<p><br> +</p> +<pre class="eval">div:first-child:last-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. +</p> +<pre><table> + <tr> + <td>Nagłówek k1</td> + <td>Nagłówek k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> +</table> +</pre> +<pre class="eval">table tr:first-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi). +UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa <code>:first-child</code>. +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-child") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/:first-child", "fr": "fr/CSS/:first-child" } ) }} |