path: root/files/pl/web/css/na_początek/selektory/index.html

---
title: Selektory
slug: Web/CSS/Na_początek/Selektory
tags:
  - 'CSS:Na_początek'
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
---
<p>Ta strona jest częścią piątą kursu <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.</p>

<h3 id="Informacja:_Selektory" name="Informacja:_Selektory">Informacja: Selektory</h3>

<p>CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:</p>

<div style="width: 30em;">
<pre>strong {
   color: red;
}
</pre>
</div>

<p>W terminologii CSS cała ta linia jest <em>regułą</em>. Ta reguła zaczyna się od <code>strong</code>, który jest <em>selektorem</em>. Wybiera, które elementy w drzewie DOM będą używały tej reguły.</p>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p><strong>Więcej szczegółów</strong><br>
     Część wewnątrz nawiasów klamrowych nazywamy się <em>deklaracją</em>.</p>

    <p>Słowo kluczowe <code>color</code> jest <em>własnością</em>, a <code>red</code> jest <em>wartością</em>.</p>

    <p>Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.</p>

    <p>Ten kurs odwołuje się do selektorów takich jak <code>strong</code> jako selektorów <em>znaczników</em>. Specyfikacja CSS odwołuje się do nich jako selektorów <em>typu</em>.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.</p>

<p>Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.</p>

<p>Dwa atrybuty posiadają specjalny status w CSS. Są to <code>class</code> oraz <code>id</code>.</p>

<h3 id="Selektor_class">Selektor class</h3>

<p>Użycie atrybutu <code>class</code> w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.</p>

<p>W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.</p>

<h3 id="Selektor_ID">Selektor ID</h3>

<p>Użycie atrybutu <code>id</code> w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie <code>id</code> mu nadasz. Nazwa <code>id</code> musi być unikalna w dokumencie.</p>

<p>W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym <code>id</code>, kiedy używasz go w selektorze.</p>

<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p><strong>Przykłady</strong><br>
     Ten znacznik HTML posiada zarówno atrybut <code>class</code>, jak i <code>id</code>:</p>

    <div style="width: 30em;">
    <pre>
&lt;p class="key" id="principal"&gt;
</pre>
    </div>

    <p>Id, <code>principal</code>, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy <code>key</code>.</p>

    <p>W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy <code>key</code> staną się zielone. (Nie wszystkie muszą być elementami <small>P</small>.)</p>

    <div style="width: 30em;">
    <pre>
.key {
   color: green;
}
</pre>
    </div>

    <p>Ta reguła powoduje, że jeden element o id <code>principal</code> zostanie pogrubiony:</p>

    <div style="width: 30em;">
    <pre>
#principal {
   font-weight: bolder;
}
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.</p>

<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
 <caption>Więcej szczegółów</caption>
 <tbody>
  <tr>
   <td>Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi.
    <p>Na przykład selektor <code>.key</code> wybiera wszystkie elementy, które mają klasę o nazwie <code>key</code>. Selektor <code>p.key</code> wybiera tylko elementy P, które mają klasę o nazwie <code>key</code>.</p>

    <p>Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, <code>class</code> i <code>id</code>. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor <code>{{ mediawiki.external('type=button') }}</code> wybiera wszystkie elementy, które mają atrybut <code>type</code> o wartości <code>button</code>.</p>

    <p>W dalszej części kursu (<a href="/pl/CSS/Na_pocz%C4%85tek/Tabele" title="pl/CSS/Na_początek/Tabele">Tabele</a>) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.</p>

    <p>Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a> w specyfikacji CSS.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.</p>

<p>Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.</p>

<h3 id="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id" name="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id">Zadanie: Używanie selektorów class i id</h3>

<p>1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.<br>
 2. Następnie dodaj atrybuty <strong>id</strong> i <strong>class</strong> do pierwszej kopii, a potem <strong>id</strong> do drugiej:</p>

<div style="width: 48em; color: gray;">
<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="first"&gt;
      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
    &lt;p id="second"&gt;
      &lt;strong&gt;C&lt;/strong&gt;ascading
      &lt;strong&gt;S&lt;/strong&gt;tyle
      &lt;strong&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html</code></pre>
</div>

<p>Teraz wyedytuj swój plik CSS. Zamień całą treść na:</p>

<div style="width: 40em;">
<pre><code>strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }</code></pre>
</div>

<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
  </tr>
  <tr>
   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<p>Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.</p>

<p>Selektory klas <code>.carrot</code> oraz <code>.spinach</code> mają priorytety nad selektorem znaczników <code>strong</code>.</p>

<p>Selektor id <code>#first</code> ma priorytet nad selektorami klas i znaczników.</p>

<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
 <caption>Wyzwanie</caption>
 <tbody>
  <tr>
   <td>Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski:
    <table style="border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>

    <p>Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:</p>

    <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
     <tbody>
      <tr>
       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
      </tr>
      <tr>
       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Zadanie_użycie_pseudo_selectorów">Zadanie: użycie pseudo selectorów</h2>

<ol>
 <li>Utwórz plik HTML z następują treścią:
  <pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
 </li>
 <li>Edytuj plik CSS. Zamień jego treść na:
  <pre><code>a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}</code></pre>
 </li>
 <li>Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt):
  <table>
   <tbody>
    <tr>
     <td>Go to our <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory$edit#" title="Home page">Home page</a></td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>

<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Selektory" title="Talk:pl/CSS/Na_początek/Selektory">Dyskusji</a>.</p>

<p>Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Czytelny_CSS" title="pl/CSS/Na_początek/Czytelny_CSS">Czytelny CSS</a></strong></p>

<p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}</p>