POZYCJONOWANIE, STRONY WWW BYDGOSZCZ, KONKURENCYJNE CENY, SKUTECZNIE! Advanced Technology tel. +48 535 927 682 Napisz e-mail

02 Kwiecień 2023Magia selektorów CSS

Magia selektorów CSS - czyli kto jest kim w "rodzinie" elementów html?

Jeśli chce się zmienić wygląd jakiegoś elementu HTML, trzeba wskazać - którego. Do tego właśnie służą selektory.

Jest wiele różnych selektorów, można stosować ich kombinacje - wszystko po to, aby dało się wybrać odpowiednie elementy i nie trzeba było powtarzać reguł ostylowania dla każdego elementu z osobna.

Selektory elementów
* każdy element Selektor uniwersalny
A element A (element typu A) Selektor typu
A B element B, który jest potomkiem elementu A Selektor potomka
A > B element B, który jest dzieckiem elementu A Selektor dziecka
A + B element B bezpośrednio poprzedzany przez element A Selektor braci
A ~ B element B poprzedzany przez element A Ogólny selektor braci
Selektory specjalne
DIV.klasa tak samo jak DIV[class~="klasa"] Klasy selektorów
A#identyfikator element A z identyfikatorem ID równym "identyfikator" Selektor identyfikatora
Selektory atrybutów
A[atr] element A z ustawionym atrybutem "atr" (na jakąkolwiek wartość) Prosty selektor atrybutu
A[atr="wart"] element A, którego atrybut "atr" ma wartość dokładnie "wart" Selektor atrybutu o określonej wartości
A[atr~="wart"] element A, którego wartość atrybutu "atr" jest listą oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość "wart" Selektor atrybutu zawierającego określony wyraz
A[lang|="en"] element A, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" Selektor atrybutu zawierającego łączniki 
A[atr^="wart"] element A, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" Selektor atrybutu o wartości rozpoczynającej się od...
A[atr$="wart"] element A, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" Selektor atrybutu o wartości kończącej się na...
A[atr*="wart"] element A, którego wartość atrybutu "atr" zawiera "wart" Selektor atrybutu zawierającego określony tekst
Selektory pseudoelementów
P:first-line pierwsza linijka akapitu P Pierwsza linia
P:first-letter pierwsza litera akapitu P Pierwsza litera
A:before wstawia treść przed zawartością elementu A Przed...
A:after wstawia treść po zawartości elementu A Po...
Selektory pseudoklas
A:root element A, który jest korzeniem dokumentu Korzeń
A:nth-child(n)
A:nth-last-child(n)
A:nth-of-type(n)
A:nth-last-of-type(n)
element A, który jest odpowiednio:
n-tym dzieckiem jego rodzica, n-tym dzieckiem licząc od końca, n-tym bratem typu E, n-tym bratem typu E licząc od końca
Pseudoklasy cykliczne
A:first-child element A, który jest pierwszym dzieckiem jego rodzica Pierwsze dziecko
A:last-child element A, który jest ostatnim dzieckiem jego rodzica Ostatnie dziecko
A:only-child element A, który jest jedynym dzieckiem jego rodzica Jedyne dziecko
A:first-of-type
A:last-of-type
A:only-of-type
element A, który jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu A Pseudoklasy typu
A:empty element A, który nie ma dzieci ani nie zawiera tekstu Pusty element
A:link
A:visited
element A, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy
Odsyłacz odwiedzony
A:active
A:hover
A:focus
element A podczas pewnych akcji użytkownika
(:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie)
Aktywacja
Wskazanie myszką
Zogniskowanie
A:target element A, który jest etykietą adresu dokumentu  Etykieta
A:lang(c) element typu A, który jest napisany w języku c (np.: pl - polski, en - angielski) Atrybut języka
A:enabled
A:disabled
element A (interfejsu użytkownika), który jest odblokowany bądź zablokowany Blokada
A:checked element A (interfejsu użytkownika), który jest zaznaczony (np. polewyboru lub opcji) Zaznaczenie
A:not(s) element A, którego nie kojarzy prosty selektor s Negacja
  • Efekt obracania się menu 09 Kwiecień 2023

    Efekt obracania się menu

    Poniżej znajduje się efekt dość nietypowej nawigacji na stronie (menu podstron) polega on na tzw "odwracaniu" zawartości. Wykonanie jest banalnie proste i wymaga jedynie kilku styli CSS oraz struktury menu w HTML.


  • Adobe Flash to już przeszłość 08 Kwiecień 2023

    Adobe Flash to już przeszłość

    Wstawki z animacjami wykonanymi we Flashu? Całe strony we flashu? Nie dziękuję... Nawet kosztem wykonania "uboższej" animacji proponuję zastosowanie technik w CSS3, poniżej próbka możliwości animacji 3D…


  • Strona długo się ładuje 07 Kwiecień 2023

    Strona długo się ładuje

    W dzisiejszych czasach oraz dostępnych łączach internetowych... raczej zbędne, ale na pewno zaciekawi :) Zastosować można np przy wczytywaniu jakiegoś "naprawdę sporego" zdjęcia, lub całej strony. Pre-loader podczas…


  • Tablica kodów ASCII 06 Kwiecień 2023

    Tablica kodów ASCII

    Czasami zachodzi konieczność wstawienia znaku "specjalnego" w łańcuchu. Przykładowo "enter" czyli chr(13), lub potrzebujemy wygenerować pseudolosowy ciąg znaków [a-z] czyli od chr(97) do chr(122), kto by…


  • Efektywne zdjęcia na stronę 05 Kwiecień 2023

    Efektywne zdjęcia na stronę

    Poniżej znajduje się efekt "koloryzacji" zdjęcia po najechaniu na nie myszką. Efekt ten został uzyskany jedynie za pomocą styli CSS. Zaledwie kilka linijek kodu CSS ożywi nam obraz całej strony, a przy tym bez…


  • Glyphicons - wstawiaj ikonki przy pomocy fontów 04 Kwiecień 2023

    Glyphicons - wstawiaj ikonki przy pomocy fontów

    Niejednokrotnie można zauważyć że na stronach internetowych przyciski wraz z ikonką zmieniają np swój kolor, są obracane lub powiększane bez utraty swojej jakości. Jak to jest możliwe? Ikonki te nie są...


  • Aktualne trendy w webdesignie 03 Kwiecień 2023

    Aktualne trendy w webdesignie

    FlatDesign - Płaskie jest ładne! Jeszcze do niedawna bardzo modne było wykonywanie elementów graficznych strony tak aby naśladowały rzeczywiste obiekty (np. trójwymiarowe przyciski). Aktualnie ustępuje to miejsca prezentacji…


  • Cięcie grafik, strona www na tabelkach 01 Kwiecień 2023

    Cięcie grafik, strona www na tabelkach

    Jeszcze do niedawna rozpoczęcie prac nad wykonaniem strony internetowej polegało wpierw na wykonaniu projektu graficznego. Następnie projekt ten był cięty na kawałki i w formie tabelki wyświetlany na stronie.