30 selektorów CSS, które musisz zapamiętać

Learn CSS: The Complete Guide

stworzyliśmy kompletny przewodnik, który pomoże Ci nauczyć się CSS, niezależnie od tego, czy dopiero zaczynasz od podstaw, czy chcesz poznać bardziej zaawansowany CSS.

selektory CSS

więc nauczyłeś się bazy id, class i descendant selektorów-a potem nazwałeś to dzień? Jeśli tak, tracisz ogromną elastyczność. Zawdzięczasz to sobie, aby te zaawansowane selektory CSS i CSS3 zostały zapisane w pamięci.

Podstawowe Selektory

1. *

* { margin: 0; padding: 0;}

wybijmy te oczywiste, dla początkujących, zanim przejdziemy do bardziej zaawansowanych selektorów.

symbol gwiazdy będzie skierowany na każdy pojedynczy element na stronie. Wielu programistów użyje tej sztuczki, aby wyzerować margins i padding. Chociaż jest to z pewnością dobre dla szybkich testów, radzę nigdy nie używać tego w kodzie produkcyjnym. Dodaje zbyt dużą wagę w przeglądarce i jest niepotrzebny.

* może być również używany z selektorami dziecięcymi.

#container * { border: 1px solid black;}

będzie to skierowane na każdy pojedynczy element, który jest potomkiem #container div. Ponownie, staraj się nie używać tej techniki bardzo, jeśli w ogóle.

2. # X

#container { width: 960px; margin: auto;}

Prefiksowanie symbolu skrótu do selektora pozwala nam na kierowanie przez id. Jest to najpowszechniejsze użycie; należy jednak zachować ostrożność podczas używania selektorów id.

zadaj sobie pytanie: czy absolutnie muszę zastosować id do tego elementu, aby go skierować?

id selektory są sztywne i nie pozwalają na ponowne użycie. Jeśli to możliwe, najpierw spróbuj użyć nazwy tagu, jednego z nowych elementów HTML5, a nawet pseudo-klasy.

3. .X

.error { color: red;}

jest to selektor class. Różnica między id s I class es polega na tym, że z tymi ostatnimi możesz kierować wiele elementów. Użyj class es, jeśli chcesz, aby Twoja stylizacja miała zastosowanie do grupy elementów. Alternatywnie, użyj id s, aby znaleźć igłę w stogu siana i stylizuj tylko ten konkretny element.

4. X

a { color: red; }ul { margin-left: 0; }

co zrobić, jeśli chcesz kierować wszystkie elementy na stronę, zgodnie z ich type, a nie id lub classnazwa? Zachowaj prostotę i użyj selektora typu. Jeśli chcesz kierować na wszystkie nieuporządkowane listy, użyj ul {}.

Live Demo podstawowych selektorów

kombinatorów selektorów

5. X Y

li a { text-decoration: none;}

następnym najczęściej używanym selektorem jest selektor descendant. Kiedy musisz być bardziej szczegółowy z selektorami, używaj ich. Na przykład, co zrobić, jeśli zamiast kierować wszystkie znaczniki kotwicy, musisz kierować tylko kotwice, które znajdują się na liście nieuporządkowanej? Jest to szczególnie, gdy używasz selektora Potomków.

Pro-wskazówka: jeśli twój selektor wygląda jak X Y Z A B.error, robisz to źle. Zawsze zadawaj sobie pytanie, czy jest to absolutnie konieczne, aby zastosować całą tę wagę.

6. X + Y

ul + p { color: red;}

jest to określane jako sąsiedni selektor. Wybierze tylko ten element, który jest bezpośrednio poprzedzony poprzednim elementem. W takim przypadku tylko pierwszy akapit po każdym ul będzie miał czerwony tekst.

7. X > Y

div#container > ul { border: 1px solid black;}

różnica między standardowym X Y i X > Y polega na tym, że ten ostatni wybierze tylko bezpośrednie dzieci. Na przykład rozważ następujące znaczniki.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

selektor #container > ul będzie skierowany tylko na uls, które są bezpośrednimi dziećmi div z id container. Nie będzie on skierowany na przykład na ul, który jest dzieckiem pierwszego li.

z tego powodu korzystanie z kombinatora dziecięcego przynosi korzyści. W rzeczywistości jest to zalecane szczególnie podczas pracy z silnikami selektorów CSS opartych na JavaScript.

8. X ~ Y

ul ~ p { color: red;}

ten kombinator rodzeństwa jest podobny do X + Y, ale jest mniej rygorystyczny. Podczas gdy sąsiedni selektor (ul + p) wybierze tylko pierwszy element, który jest bezpośrednio poprzedzony poprzednim selektorem, ten jest bardziej uogólniony. Wybierze, odwołując się do naszego przykładu powyżej, dowolne elementy p, o ile podążają one za ul.

Live Demo selektorów kombinatorów

selektorów atrybutów

9. X

a { color: green;}

określany jako selektor atrybutów, w naszym powyższym przykładzie wybierze tylko znaczniki zakotwiczenia, które mają atrybut title. Znaczniki kotwicy, które nie otrzymają tej konkretnej stylizacji. Ale co, jeśli chcesz być bardziej szczegółowy? Zobacz następny przykład!

10. X

a { color: #83b348; /* Envato green */}

powyższy fragment będzie stylizował wszystkie znaczniki kotwicy, które linkują do https://code.tutsplus.com; otrzymają nasz markowy zielony kolor. Wszystkie inne znaczniki kotwicy pozostaną nienaruszone.

zauważ, że zawijamy wartość w cudzysłowy. Pamiętaj, aby to zrobić również podczas korzystania z silnika selektora CSS JavaScript. Jeśli to możliwe, Zawsze używaj selektorów CSS3 zamiast nieoficjalnych metod.

to działa dobrze, chociaż jest trochę sztywne. Co jeśli link rzeczywiście przekierowuje do Envato Tuts+, ale może ścieżka jest code.tutsplus.com zamiast pełnego adresu URL? W takich przypadkach możemy użyć składni wyrażeń regularnych.

11. X

a { color: #83b348; /* Envato green */}

proszę bardzo, tego właśnie potrzebujemy. Gwiazdka oznacza, że kontynuowana wartość musi pojawić się gdzieś w wartości atrybutu. W ten sposób, to obejmuje tutsplus.com, code.tutsplus.com, a nawet webdesign.tutsplus.com.

pamiętaj, że jest to szerokie stwierdzenie. Co zrobić, jeśli tag kotwicy połączony z jakąś witryną non-Envato z ciągiem tutsplus w adresie URL? Jeśli chcesz być bardziej szczegółowy, użyj ^ i $, aby odwołać się odpowiednio do początku i końca łańcucha.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

zastanawiałeś się kiedyś, jak niektóre strony internetowe są w stanie wyświetlić małą ikonkę obok linków zewnętrznych? Jestem pewien, że widziałeś je wcześniej; są to miłe przypomnienia, że link skieruje cię do zupełnie innej strony internetowej.

jest to cinch z symbolem caratu. Jest najczęściej używany w wyrażeniach regularnych do oznaczania początku ciągu znaków. Jeśli chcemy kierować na wszystkie znaczniki kotwicy, które mają href, która zaczyna się od http, możemy użyć selektora podobnego do fragmentu pokazanego powyżej.

zauważ, że nie szukamy https://; jest to niepotrzebne i nie uwzględnia adresów URL zaczynających się od https://.

a co jeśli zamiast tego chcielibyśmy wystylizować wszystkie kotwice, które linkują np. do zdjęcia? W takich przypadkach poszukajmy końca ciągu.

13. X

a { color: red;}

ponownie używamy symbolu wyrażeń regularnych, $, aby odnieść się do końca łańcucha. W tym przypadku szukamy wszystkich kotwic, które łączą się z obrazem-lub przynajmniej adresem URL kończącym się na .jpg. Pamiętaj, że nie będzie to przechwytywać obrazów GIF i PNG.

14. X

a { color: red;}

jak zrekompensować wszystkie różne typy obrazów? Możemy stworzyć wiele selektorów, takich jak:

a,a,a,a { color: red;}

ale to jest ból i to nieefektywne. Innym możliwym rozwiązaniem jest użycie własnych atrybutów. Co jeśli dodamy nasz własny atrybut data-filetype do każdego zakotwiczenia, które łączy się z obrazem?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

następnie, mając ten hak na miejscu, możemy użyć standardowego selektora atrybutów do kierowania tylko tych kotwic.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

oto specjalny, który zaimponuje Twoim znajomym. Niewiele osób wie o tej sztuczce. Symbol tyldy (~) pozwala nam celować w atrybut, który ma oddzieloną spacjami listę wartości.

idąc wraz z naszym niestandardowym atrybutem z numeru 15 powyżej, możemy utworzyć atrybut data-info, który może otrzymać oddzieloną spacjami listę wszystkiego, co musimy zanotować. W takim przypadku zanotujemy Linki zewnętrzne i linki do obrazów-tylko dla przykładu.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

z tym znacznikiem w miejscu, teraz możemy kierować dowolne tagi, które mają jedną z tych wartości, za pomocą triku selektora atrybutów ~.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

ładne, co?

Live Demo selektorów atrybutów

Pseudo selektorów

16. X: odwiedzone i X:link

a:link { color: red; }a:visited { color: purple; }

używamy pseudo-klasy :link do kierowania wszystkich znaczników kotwicy, które nie zostały jeszcze kliknięte.

alternatywnie mamy również pseudo klasę :visited, która, jak można się spodziewać, pozwala nam zastosować określone style tylko do znaczników kotwicy na stronie, które zostały kliknięte lub „odwiedzone”.

17. X: checked

input:checked { border: 1px solid black;}

ta pseudo klasa będzie skierowana tylko na zaznaczony element interfejsu użytkownika—jak przycisk opcji lub pole wyboru. To takie proste.

18. X: po

pseudo klasy before i after są świetne. Wydaje się, że każdego dnia ludzie znajdują nowe i kreatywne sposoby na ich efektywne wykorzystanie. Po prostu generują zawartość wokół wybranego elementu.

wielu zostało po raz pierwszy wprowadzonych do tych klas, gdy napotkali clear-fix hack.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

Ten hack używa pseudo klasy :after, aby dodać spację po elemencie, a następnie go wyczyścić. To doskonała sztuczka, aby mieć ją w torbie z narzędziami, szczególnie w przypadkach, gdy metoda overflow: hidden; nie jest możliwa.

aby uzyskać inne twórcze wykorzystanie tego, zapoznaj się z moją szybką wskazówką na temat tworzenia cieni.

zgodnie ze specyfikacją selektorów CSS3, technicznie należy używać składni pseudoelementów dwóch dwukropków ::. Jednakże, aby zachować zgodność, agent użytkownika zaakceptuje również użycie pojedynczego dwukropka.

19. X: hover

div:hover { background: #e3e3e3;}

Oh come on. Znasz to. Oficjalnym określeniem jest „pseudo Klasa user action”. Brzmi to myląco,ale tak naprawdę nie jest. chcesz zastosować określoną stylizację, gdy użytkownik unosi się nad elementem? To załatwi sprawę!

należy pamiętać, że starsze wersje programu Internet Explorer nie reagują, gdy pseudo Klasa :hover jest stosowana do czegokolwiek innego niż znacznik kotwicy.

najczęściej używasz tego selektora podczas stosowania, na przykład, border-bottom do zakotwiczenia znaczników, po najechaniu kursorem.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; wygląda lepiej niż text-decoration: underline;.

20. X: nie (selektor)

div:not(#container) { color: blue;}

szczególnie pomocna jest pseudo Klasa negacji. Powiedzmy, że chcę wybrać wszystkie divs, z wyjątkiem tego, który ma id container. Powyższy fragment doskonale poradzi sobie z tym zadaniem.

lub, gdybym chciał wybrać każdy pojedynczy element (nie zalecany) z wyjątkiem znaczników akapitu, moglibyśmy zrobić:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

możemy używać pseudoelementów (oznaczonych przez ::) do stylizowania fragmentów elementu, takich jak pierwsza linia lub pierwsza litera. Należy pamiętać, że muszą one być stosowane do elementów na poziomie bloków, aby mogły zostać zastosowane.

pseudo-element składa się z dwóch dwukropków: ::

Target pierwsza litera akapitu

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

ten fragment jest abstrakcją, która znajdzie wszystkie akapity na stronie, a następnie podceluje tylko pierwszą literę tego elementu.

jest to najczęściej używane do tworzenia stylizacji gazety na pierwszą literę artykułu.

celuj w pierwszą linię akapitu

p::first-line { font-weight: bold; font-size: 1.2em;}

podobnie pseudo element ::first-line, zgodnie z oczekiwaniami, stylizuje tylko pierwszą linię elementu.

” aby uzyskać zgodność z istniejącymi arkuszami stylów, agenci użytkownika muszą również zaakceptować poprzednią notację dwukropkową dla pseudo-elementów wprowadzonych w CSS na poziomach 1 i 2 (a mianowicie, :first-line, :first-letter, :before i :after). Ta kompatybilność nie jest dozwolona dla nowych pseudoelementów wprowadzonych w tej specyfikacji.”- Specyfikacja selektorów W3C

Live Demo Pseudo selektorów

Nth potomnych i selektorów typu

22. X: NTH-child (n)

li:nth-child(3) { color: red;}

pamiętacie czasy, kiedy nie mieliśmy sposobu na celowanie w konkretne elementy stosu? nth-child pseudo Klasa rozwiązuje to!

proszę zauważyć, że nth-child akceptuje liczbę całkowitą jako parametr, ale nie jest ona oparta na zero. Jeśli chcesz kierować na drugi element listy, użyj li:nth-child(2).

możemy nawet użyć tego, aby wybrać zmienny zestaw dzieci. Na przykład, możemy zrobić li:nth-child(4n), aby wybrać co czwarty element listy.

23. X: NTH-last-child (n)

li:nth-last-child(2) { color: red;}

co, jeśli miałeś ogromną listę przedmiotów w ul i potrzebowałeś dostępu tylko do, powiedzmy, trzeciego do ostatniego elementu? Zamiast robić li:nth-child(397), możesz zamiast tego użyć pseudo klasy nth-last-child.

ta technika działa niemal identycznie jak numer 16 powyżej. Różnica polega na tym, że zaczyna się na końcu kolekcji i działa z powrotem.

24. X: n-tego typu (n)

ul:nth-of-type(3) { border: 1px solid black;}

będą chwile, kiedy zamiast wybierać child, będziesz musiał wybrać zgodnie z type elementu.

wyobraź sobie znaczniki zawierające pięć nieuporządkowanych list. Jeśli chcesz stylizować tylko trzecią ul i nie masz unikalnej id do podłączenia, możesz użyć pseudo klasy nth-of-type(n). W powyższym fragmencie tylko trzeci ul będzie miał obramowanie wokół niego.

25. X: NTH-last-of-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

i tak, aby zachować spójność, możemy również użyć nth-last-of-type, aby rozpocząć na końcu listy selektorów i wrócić do kierowania żądanego elementu.

26. X: first-child

ul li:first-child { border-top: none;}

ta strukturalna pseudo Klasa pozwala nam kierować tylko pierwsze dziecko rodzica elementu. Często używasz tego do usuwania obramowań z pierwszego i ostatniego elementu listy.

na przykład, załóżmy, że masz listę wierszy, a każdy z nich ma border-topi border-bottom. Przy takim układzie pierwszy i ostatni element w tym zestawie będzie wyglądał trochę dziwnie.

wielu projektantów stosuje klasy first i last, aby to zrekompensować. Zamiast tego możesz użyć tych pseudo klas.

27. X: last-child

ul > li:last-child { color: green;}

przeciwieństwo first-child, last-child będzie skierowane na ostatni element rodzica elementu.

last-child Selector Example

zbudujmy prosty przykład, aby zademonstrować jedno z możliwych zastosowań tych klas. Stworzymy stylizowany element listy.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

dla znaczników nie ma nic specjalnego: po prostu prosta lista.

oto CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

ta stylizacja ustawi tło, usunie domyślne wypełnienia przeglądarki na ul i zastosuje obramowania do każdego li, aby zapewnić nieco głębi.

aby dodać głębię do listy, zastosuj border-bottom do każdej li, która jest o jeden lub dwa ciemniejsza niż kolor tła li. Następnie zastosuj border-top, który jest o kilka odcieni jaśniejszy.

jedynym problemem, jak pokazano na powyższym obrazku, jest to, że ramka zostanie zastosowana do samej góry i dołu listy nieuporządkowanej—co wygląda dziwnie. Użyjmy pseudo klas :first-child i :last-child, aby to naprawić.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

no i proszę, to naprawia!

28. X: only-child

div p:only-child { color: red;}

prawdę mówiąc, prawdopodobnie nie będziesz zbyt często używał pseudo klasy only-child. Niemniej jednak, jest dostępny, jeśli go potrzebujesz.

pozwala na kierowanie elementów, które są jedynym dzieckiem jego rodzica. Na przykład, odwołując się do powyższego fragmentu, tylko akapit, który jest jedynym potomkiem div, będzie zabarwiony na Czerwono.

Załóżmy następujące znaczniki.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

w tym przypadku akapity drugiego divnie będą ukierunkowane; tylko pierwszy div. Gdy tylko zastosujesz więcej niż jedno dziecko do elementu, pseudo Klasa only-child przestaje działać.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

ta strukturalna pseudo klasa może być użyta na kilka sprytnych sposobów. Będzie on celował w elementy, które nie mają żadnego rodzeństwa w kontenerze nadrzędnym. Jako przykład, skierujmy wszystkie uls, które mają tylko jeden element listy.

najpierw zadaj sobie pytanie, jak wykonasz to zadanie. Możesz zrobić ul li, ale to będzie kierować wszystkie pozycje listy. Jedynym rozwiązaniem jest użycie only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

pseudo Klasa first-of-type pozwala wybrać pierwsze rodzeństwo swojego typu.

Test

aby lepiej to zrozumieć, zróbmy test. Skopiuj następujące znaczniki do edytora kodu:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

teraz, nie czytając dalej, spróbuj dowiedzieć się, jak kierować tylko „punkt listy 2”. Kiedy już to rozgryziesz (lub poddasz się), czytaj dalej.

rozwiązanie 1

istnieje wiele sposobów rozwiązania tego testu. Przejrzymy kilka z nich. Zacznijmy od użycia first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

ten fragment zasadniczo mówi, aby znaleźć pierwszą nieuporządkowaną listę na stronie, a następnie znaleźć tylko bezpośrednie dzieci, które są elementami listy. Następnie przefiltruj to tylko do drugiego elementu listy w tym zestawie.

Rozwiązanie 2

inną opcją jest użycie sąsiedniego selektora.

p + ul li:last-child { font-weight: bold;}

w tym scenariuszu znajdujemy ul, który natychmiast przechodzi do znacznika p, a następnie znajdujemy ostatni potomek elementu.

Rozwiązanie 3

z tymi selektorami możemy być tak nieznośni lub tak zabawni, jak chcemy.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

tym razem chwytamy pierwszy ul na stronie, a następnie znajdujemy pierwszy element listy, ale zaczynając od dołu!

Live Demo Nth potomnych i typ selektorów

wniosek

jeśli rekompensujesz sobie starsze przeglądarki, takie jak Internet Explorer 6, nadal musisz być ostrożny przy użyciu tych nowszych selektorów. Ale proszę, nie pozwól, aby to powstrzymało cię od uczenia się tego. Zrobiłbyś sobie wielką krzywdę. Pamiętaj, aby zapoznać się z listą zgodności przeglądarki. Alternatywnie możesz użyć doskonałego IE9 Deana Edwarda.skrypt js zapewniający obsługę tych selektorów w starszych przeglądarkach.

po drugie, podczas pracy z bibliotekami JavaScript, takimi jak popularny jQuery, zawsze staraj się używać tych natywnych selektorów CSS3 zamiast niestandardowych metod/selektorów biblioteki, jeśli to możliwe. To sprawi, że kod będzie szybszy, ponieważ silnik selektora może używać natywnego parsowania przeglądarki, a nie własnego.

to świetnie, że spędzasz czas na nauce podstaw projektowania stron internetowych, ale jeśli potrzebujesz szybkiego rozwiązania, jeden z naszych gotowych do użycia szablonów CSS może być dobrym rozwiązaniem. Mamy również kilka elementów CSS premium do rozważenia.

• 
  CSS3
• 
  Bootstrap 4
  18 najlepszych wtyczek Bootstrap 4

darmowy dostęp do Envato Elements przez 1 miesiąc

wreszcie, oto specjalna oferta, która pomoże Ci zbudować profesjonalnie wyglądające witryny i aplikacje. Oprócz korzystania z tych selektorów CSS, dlaczego nie skorzystać z wysokiej jakości zdjęć stockowych, materiałów wideo, czcionek premium, grafiki, ilustracji i innych?

normalnie za takie zasoby trzeba by zapłacić. Ale teraz możesz uzyskać dostęp do milionów zasobów kreatywnych dla swoich projektów kodowania przez cały miesiąc, całkowicie bezpłatnie. Co więcej, otrzymujesz nieograniczoną liczbę pobrań, dzięki czemu możesz pobrać tyle, ile chcesz w ciągu tego miesiąca i zapłacić tylko wtedy, gdy zdecydujesz się kontynuować!



aby skorzystać z tej oferty, kliknij ten specjalny link rejestracyjny lub wpisz kod poniżej na stronie rejestracji:

elements_cont_tuts-freemonth1-4bwkbp

nie czekaj zbyt długo-oferta jest ważna tylko przez ograniczony czas!