Selektory elementów
Selektory elementów CSS to fundamentalne narzędzie wykorzystywane przez projektantów i programistów, które pozwala na łączenie deklaracji stylów z odpowiednimi elementami HTML. Dzięki selektorom możliwe jest precyzyjne określenie, które elementy struktury strony mają otrzymać określone style. Selektory to kluczowy aspekt konstrukcji arkuszy stylów CSS, umożliwiający nie tylko tworzenie atrakcyjnych i spójnych układów, ale również dbanie o responsywność i dostępność witryny.
Przykłady użycia selektorów
W CSS istnieje wiele rodzajów selektorów, które umożliwiają wybieranie elementów na podstawie ich nazw, atrybutów, relacji z innymi elementami czy stanów. Poszczególne selektory oferują różne poziomy precyzji i wygody. Ich połączenie w celu stworzenia zaawansowanych reguł sprawia, że CSS jest potężnym narzędziem w rękach twórców stron internetowych.
Selektor elementu — Podstawowy rodzaj selektora, wybiera elementy na podstawie nazwy znacznika HTML.
Przykład użycia selektora elementu:
h1 {
font-size: 2rem;
}W powyższym przykładzie, wszystkie nagłówki pierwszego poziomu znacznik HTML <h1> będą miały rozmiar fontów równy 2rem.
Selektor klasy — Wybiera elementy na podstawie wartości atrybutu class. Zapisuje się go poprzez umieszczenie kropki (.) przed nazwą klasy.
Przykład użycia selektora klasy:
.styl-tekstu {
font-family: Arial, sans-serif;
}W powyższym przykładzie, wszystkie elementy z atrybutem class="styl-tekstu" będą miały font Arial z rodziny sans-serif.
Selektor id — Wybiera elementy na podstawie wartości atrybutu id. Zapisuje się go poprzez umieszczenie znaku hash (#) przed wartością id.
Przykład użycia selektora id:
#naglowek {
background-color: blue;
}W powyższym przykładzie, element z atrybutem id="naglowek" będzie miał niebieskie tło.
Selektor atrybutu — Wybiera elementy na podstawie obecności lub wartości innego atrybutu. Istnieje kilka wariantów selektorów atrybutów, które pozwalają na precyzyjne określenie elementów do wyboru.
Selektor atrybutu z wartością — Wybiera elementy z określoną wartością atrybutu. Przykład użycia:
input[type="text"] {
width: 100%;
}W powyższym przykładzie, wszystkie elementy input z atrybutem type="text" będą miały szerokość równą 100% rodzica.
Selektor atrybutu z częściową wartością — Wybiera elementy, które mają atrybut z wartością zawierającą określony ciąg znaków. Przykład użycia:
a[href*="example"] {
color: red;
}W powyższym przykładzie, wszystkie elementy a z atrybutem href zawierającym ciąg “example” będą miały czerwony kolor tekstu.
Selektor atrybutu z wartością zaczynającą się od określonego ciągu — Wybiera elementy z atrybutem, którego wartość zaczyna się od określonego ciągu znaków. Przykład użycia:
a[href^="https://"] {
color: green;
}W powyższym przykładzie, wszystkie elementy a z atrybutem href zaczynającym się od “https://” będą miały zielony kolor tekstu.
Selektor atrybutu z wartością kończącą się na określonym ciągu — Wybiera elementy z atrybutem, którego wartość kończy się na określonym ciągu znaków. Przykład użycia:
a[href$=".pdf"] {
font-weight: bold;
}W powyższym przykładzie, wszystkie elementy a z atrybutem href kończącym się na “.pdf” będą miały pogrubiony tekst.
Pseudoklasy i pseudoelementy — Pozwalają na wybór elementów w oparciu o ich stan, relację względem innych elementów lub części elementów. Przykłady użycia:
Pseudoklasa :hover — Wybiera element, gdy kursor myszy znajduje się nad nim. Przykład użycia:
a:hover {
text-decoration: underline;
}W powyższym przykładzie, gdy kursor myszy znajdzie się nad elementem a, tekst zostanie podkreślony.
Pseudoklasa :nth-child() — Wybiera element, który jest n-tym dzieckiem swojego rodzica. Przykład użycia:
li:nth-child(2) {
color: blue;
}W powyższym przykładzie, drugi element li w swoim rodzicu będzie miał niebieski kolor tekstu.
Pseudoelement ::before — Wstawia zawartość przed elementem. Przykład użycia:
p::before {
content: "Ważne: ";
font-weight: bold;
}W powyższym przykładzie, przed każdym elementem p zostanie dodany tekst “Ważne: ” pogrubiony.
Warto zapamiętać
Selektory w CSS pozwalają na precyzyjne określenie, jakie elementy na stronie HTML zostaną zmodyfikowane za pomocą określonych styli. Dzięki różnym rodzajom selektorów, takich jak selektory elementów, klas, id, atrybutów, pseudoklas czy pseudoelementów, możemy kontrolować wygląd i zachowanie strony internetowej w sposób elastyczny i wydajny. Dobre praktyki i czysty kod w przypadku CSS są kluczowe dla utrzymania przejrzystości, łatwości modyfikacji i efektywności zarządzania stylem strony. Zachowanie podstaw wpływa znacząco na poprawę wydajności, ładowania stron oraz ogólnej współpracy w zespołach projektowych.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
