Za każdym razem, gdy używamy CSS, używamy selektorów. Mimo to selektory CSS są jedną z bardziej zaniedbanych części specyfikacji.
Mówimy o wielkich transformacjach w CSS3, ale zbyt często zapominamy o podstawach. Dobre wykorzystanie selektorów sprawia, że nasze codzienne kodowanie jest prostsze i bardziej eleganckie. Dzisiaj omówię 10 selektorów, które często ześlizgują się z naszych umysłów, ale są skuteczne i bardzo przydatne.
Selektor * może być najłatwiejszy do zapamiętania, ale często jest niedostatecznie wykorzystywany. To, co robi, to stylizowanie wszystkiego na stronie i świetnie nadaje się do tworzenia resetowania, a także do tworzenia domyślnych ustawień strony, takich jak rodzina czcionek i rozmiar, który chcesz mieć.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Ten selektor nazywa się sąsiednim selektorem, a to, co robi, wybiera element, który jest zaraz po pierwszym elemencie. Jeśli chcesz wybrać pierwszy div po naszym nagłówku, wpisz:
header + div {margin-top: 50px;}Ten selektor wybierze tylko dzieci w odróżnieniu od AB , które wybiorą dowolne dzieci poziomu A. Ten selektor jest zalecany, gdy pracujesz z dziećmi pierwszego poziomu elementu nadrzędnego. Na przykład, jeśli chcesz wybrać elementy listy pierwszego poziomu na nieuporządkowanej liście, która wygląda następująco:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Możesz użyć tego selektora, ponieważ zwykły selektor AB również wybierze elementy listy wewnątrz zagnieżdżonej listy nieuporządkowanej
ul > li {background: black;color: white;}Jest to naprawdę dobry selektor, gdy chcesz nadać konkretny link w inny sposób, cokolwiek jest w cudzysłowach, zostanie dopasowane do href łącza. Na przykład, aby nadać styl wszystkim linkom do Facebooka z kolorem niebieskim, użyłbyś:
a[href*="facebook"] {color: blue;}Istnieje również wersja bez *, która pasuje do dokładnego adresu URL, który można użyć do dokładnych linków.
Ten selektor jest szczególnie przydatny ze względu na klauzulę negacji, która pozwala ci wybrać dowolną grupę elementów, które nie pasują do tego, co umieścisz w B. Jeśli chcesz wybrać każdy element div oprócz stopki, której potrzebujesz:
div:not(.footer) {margin-bottom: 40px;}Pierwsze dziecko i ostatnie dziecko pozwalają nam wybrać pierwsze i ostatnie dziecko elementu nadrzędnego. Może to być bardzo pomocne, jeśli chodzi o elementy listy i usunięcie marginesu lub granic. Aby usunąć ramkę z pierwszego elementu listy i margines z ostatniego elementu listy, potrzebujesz:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}N-dziecko to prosty sposób na wybranie dowolnego dziecka elementu według jego kolejności. Jeśli na przykład chciałbyś, aby trzeci element listy znajdował się na nieuporządkowanej liście, byłby to właściwy sposób:
ul li:nth-child(3) {background: #ccc;}Możemy użyć n-tego-dziecka do wybrania każdego mnożnika liczby za pomocą zmiennej n, na przykład, jeśli wstawimy 3n, wybieramy pozycję listy numer 3, 6, 9, 12 i tak dalej.
Nth-last-child działa jak n-dziecko, ale zamiast liczenia z pierwszego elementu listy zaczyna odliczanie od ostatniego, więc jeśli użyjesz go z numerem drugim, wybierzesz element listy, który pojawi się przed ostatnim i jego użycie jest podobne do selektora n-tego dziecka:
ul li:nth-last-child(2) {background: #ccc;}Ten selektor robi dokładnie to, co myślisz, że robi; widzi, jaki typ elementu na nim umieściłeś i wybiera na przykład trzeci element na twojej stronie, który pasuje do tego, co wpisałeś. Aby wybrać trzeci akapit w div, należy użyć:
div p:nth-of-type(3) {font-style: italic;}Czy zauważyłeś, że kiedy szukasz czegoś w Google, strony, które już widziałeś, pojawiają się w innym kolorze? Dokładnie to robi odwiedzane. Jest to świetny dodatek dla użytkowników, ale czasami jest zapomniany iz mojego doświadczenia wynika, że jest przydatny przy każdym wyszukiwaniu w Google.
a:visited {color: blue;}Z mojego doświadczenia wynika, że używanie tego rodzaju selektorów podczas kodowania może zaoszczędzić nam wiele czasu, a także uniknąć potrzeby zaśmiecenia naszego identyfikatora przez wiele znaczników. A to dopiero początek selektorów CSS, jest dużo więcej selektorów, które są naprawdę przydatne, ale czasem zapomniane.
Czy używasz selektorów CSS w swoich arkuszach stylów? Czy łatwiej jest znaleźć identyfikatory i klasy? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz kodu przez Shutterstock.