Podstawowe selektory w CSS

1. Selektory typu (Type Selectors)

Selektory w CSS pozwalają wybierać elementy HTML i stosować do nich style. Znajomość podstawowych selektorów pomaga skutecznie i precyzyjnie wybierać elementy na stronie, co sprawia, że CSS jest potężnym narzędziem do stylizacji treści w sieci. W tym artykule przyjrzymy się podstawowym typom selektorów: selektorom typu (Type Selectors), selektorom klas, selektorom ID, grupowym i uniwersalnym selektorom.

Selektory typu wybierają wszystkie elementy określonego tagu. Na przykład, jeśli chcemy zastosować style do wszystkich akapitów na stronie, użyjemy selektora typu z tagiem <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Ten tekst będzie niebieski i w rozmiarze 16 pikseli.</p>
<p>Drugi akapit z tymi samymi stylami.</p>

Selektory typu są przydatne, gdy trzeba zastosować style do wszystkich elementów określonego rodzaju, na przykład do wszystkich nagłówków lub akapitów. Dają one ogólną kontrolę nad wyglądem grupy elementów i upraszczają zarządzanie stroną.

2. Selektory klasy (Class Selectors)

Selektory klasy pozwalają wybierać elementy o określonej wartości atrybutu class. Klasa oznaczana jest kropką (.) przed nazwą klasy. Tę samą klasę można używać dla wielu elementów, co pozwala stosować te same style do wielu elementów.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Ten tekst jest wyróżniony niebieskim kolorem na żółtym tle.</p>
<p>Zwykły tekst bez klasy.</p>
<div class="highlight">Ten blok również będzie wyróżniony stylami klasy highlight.</div>

Selektory klasy są uniwersalne i wygodne, ponieważ umożliwiają tworzenie stylów, które mogą być stosowane do różnych elementów. Klasy są szczególnie przydatne, gdy zachodzi potrzeba stylizacji grupy niespowiązanych elementów.

3. Selektory identyfikatora (ID Selectors)

Selektory identyfikatora wybierają elementy o określonej wartości atrybutu id. Identyfikator oznacza się symbolem # przed nazwą. W przeciwieństwie do klas, ID powinno być unikalne na stronie, co czyni go idealnym do stylizacji unikalnych elementów, takich jak nagłówki lub pasek nawigacyjny.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Nagłówek strony</h1>
<p>Ten akapit nie zostanie objęty selektorem identyfikatora.</p>

Selektory identyfikatora stosują styl tylko do jednego elementu na stronie, dlatego używa się ich do wyróżnienia unikalnych elementów za pomocą specyficznych stylów.

4. Selektory grupowe (Group Selectors)

Selektory grupowe pozwalają stosować te same style do kilku elementów naraz. Robi się to za pomocą przecinka, który łączy kilka selektorów w jedno regułę CSS. Selektory grupowe upraszczają kod, ponieważ pozwalają określić wspólne style dla różnych typów elementów.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Nagłówek pierwszego poziomu</h1>
<h2>Nagłówek drugiego poziomu</h2>
<h3>Nagłówek trzeciego poziomu</h3>
<p>Ten tekst nie zostanie objęty selektorem grupowym.</p>

Selektory grupowe pomagają skrócić kod CSS i uprościć stylizację, szczególnie gdy trzeba zastosować te same właściwości do różnych elementów, na przykład do nagłówków różnych poziomów.

5. Selektory uniwersalne (Universal Selectors)

Uniwersalny selektor oznacza się gwiazdką (*) i wybiera wszystkie elementy na stronie. To potężne narzędzie, które pozwala szybko określić podstawowe style dla wszystkich elementów, na przykład ustawić te same marginesy lub określić domyślną czcionkę. Uniwersalny selektor jest przydatny do resetowania stylów (reset), gdy trzeba usunąć domyślne marginesy i odstępy przeglądarki, aby bardziej precyzyjnie zarządzać stylami.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Nagłówek</h1>
<p>Akapit tekstu z zerowymi marginesami i odstępami.</p>
<div>Kontener z zerowymi marginesami i odstępami.</div>

W tym przykładzie uniwersalny selektor resetuje marginesy i odstępy dla wszystkich elementów, co pomaga zachować spójność stylów na stronie. Ten zabieg jest często stosowany na początku kodu CSS, aby stworzyć jednolitą stylizację.