From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/css/_colon_first-child/index.html | 74 ++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/pl/web/css/_colon_first-child/index.html (limited to 'files/pl/web/css/_colon_first-child/index.html') 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' +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Pseudoklasa :first-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-child ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":first-node") }}. +

+

Składnia

+
selektor:first-child { własności }
+
+

Przykłady

+
<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>
+
+
span:first-child { font-weight: bold; }
+
+

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "pierwszy":

+
  1. W pierwszym przypadku span o id first jest pierwszym dzieckiem elementu body +
  2. W drugim przypadku span o id dfirst jest pierwszym dzieckiem elementu div +
+


+

+
div:first-child:last-child { background-color: red; }
+
+

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. +

+
<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>
+
+
table tr:first-child { background-color: red; }
+
+

Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi). +UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa :first-child. +

+

Notatki

+

Zobacz także

+

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-child") }} +

+
+
+{{ languages( { "en": "en/CSS/:first-child", "fr": "fr/CSS/:first-child" } ) }} -- cgit v1.2.3-54-g00ecf