Ostatnia aktualizacja 18 grudnia, 2023
Selektor CSS to podstawowe narzędzie dla każdego web developera, który pisze stronę z użyciem HTML-a i CSS-a. Selektor umożliwia precyzyjne określanie elementów HTML, którym chcemy nadać określone style. Dzięki nim możemy skutecznie manipulować wyglądem strony internetowej, poprawiając jej estetykę oraz użyteczność. W niniejszym artykule przedstawimy różne rodzaje selektorów, ich zastosowanie oraz przykłady kodu, dzięki czemu zrozumiesz jak z nich poprawnie korzystać.
- Selektory CSS, takie jak selektory tagów, klas, ID, potomków i atrybutów, służą do precyzyjnego stylizowania elementów strony internetowej.
- Przykłady kodu:
p { color: red; }dla selektora tagów czyinput[type="text"] { border-color: blue; }dla selektora atrybutów, demonstrują praktyczne zastosowanie selektorów. - Zrozumienie działania selektorów CSS jest niezbędne dla efektywnego projektowania stron. Pozwalają one na szczegółową kontrolę nad stylem każdego elementu.
Podstawowe selektory CSS
Selektor tagów
Najprostszy selektor, który wybiera elementy na podstawie nazwy tagu. Na przykład, p { color: red; } zmienia kolor tekstu we wszystkich paragrafach na czerwony.
p {
color: red;
}Selektor CSS – nadaj styl elementom o tej samej klasie
Pozwala stylizować grupę elementów o tej samej klasie. Jeśli na przykład mamy <div class="box"></div>, możemy zastosować .box { border: 1px solid black; }, aby nadać obramowanie wszystkim elementom z klasą box.
.box {
border: 1px solid black;
}Selektor ID
Selektor ID jest unikatowy dla każdego elementu. Jeśli mamy <div id="header"></div>, możemy użyć #header { background-color: blue; }, aby zmienić tło tylko tego konkretnego elementu.
#header {
background-color: blue;
}Zaawansowane selektory CSS
Selektor potomków
Umożliwia wybieranie elementów, które są potomkami innego elementu. Na przykład, ul li { color: green; } zmienia kolor tekstu wszystkich elementów li wewnątrz ul.
ul li {
color: green;
}Selektor dzieci bezpośrednich
> wybiera tylko bezpośrednie dzieci elementu. ul > li { font-weight: bold; } sprawi, że tylko bezpośrednie elementy li wewnątrz ul będą pogrubione.
ul > li {
font-weight: bold;
}Selektor sąsiadujących elementów
+ wybiera element bezpośrednio następujący po innym. h1 + p { margin-top: 20px; } nada margines górny paragrafowi bezpośrednio następującemu po nagłówku h1.
h1 + p {
margin-top: 20px;
}Selektor wszystkich sąsiadów
~ to selektor, który wybiera wszystkie elementy na tym samym poziomie, które następują po określonym elemencie. h1 ~ p { line-height: 1.5; } zmieni interlinię we wszystkich paragrafach następujących po h1.
h1 ~ p {
line-height: 1.5;
}Dalsza część tekstu znajduje się pod materiałem wideo:
Selektory CSS w atrybutach
Podstawowy selektor atrybutów
[attr] wybiera elementy z określonym atrybutem. Na przykład, input[type="text"] { border-color: blue; } zmienia kolor obramowania wszystkich pól tekstowych.
input[type="text"] {
border-color: blue;
}Selektor atrybutów z wartością
[attr="value"] wybiera elementy z określonym atrybutem o konkretnej wartości. a[target="_blank"] { font-style: italic; } nada kursywę wszystkim linkom otwierającym się w nowym oknie.
a[target="_blank"] {
font-style: italic;
}Czytaj także:
CSS padding. Zadbaj o estetykę strony
