Szersze zrozumienie selektorów CSS

pytanie zadane 11 sierpnia 2015 w HTML i CSS przez Wiciorny Ekspert (269,710 p.)
zamknięte 11 sierpnia 2015 przez Wiciorny

Witajcie, mam dwa pytania. Jedno tyczy się bardziej- selektorów w CSS, a dokładnie " dziedziczenia " przy czym chodzi mi o używanie składni "Co do nich".

jaka jest różnica pomiędzy

selektorem 
p a   {  ... tutaj definiujemy kod;  } 

pomiędzy 

p > a { definiujemy kod; }

Rozumiem, że w drugim "a" jako potomek po p natomiast ... w pierwszym przecież też chodzi o TAG- a, który występuje po paragrafie. I tutaj gubię różnicę.

Wiem, że bezpośrednie występowanie to stosowanie znaku "+" czyli p + a ...

Drugie pytanie odnosi się do róznicy : jaka jest pomiędzy stosowaniem ID w HTML , a stosowanie NAME =""; ? Czy name to nie jest z HTML4 jeszcze pozostałość, czy ma to znaczenie? Rozumiem że pewnie o ile dla budowy strony nie, to ... dla przeglądarki i odczytywania tak.

komentarz zamknięcia: przy pomocy poradziłem sobie ! rozwiązane !

2 odpowiedzi

odpowiedź 11 sierpnia 2015 przez Gothdo Obywatel (1,810 p.)
wybrane 11 sierpnia 2015 przez Wiciorny

Najlepsza

W pierwszym przykładzie masz selektor potomka, czyli wszystkie a, które mają p jako przodka (niekoniecznie jako rodzica). W drugim przykładzie masz selektor rodzica, czyli wszystkie a, które mają p jako rodzica. Natomiast + jest operatorem brata/siostry, czyli elementu występującego bezpośrednio po danym elemencie. Jeśli dalej nie rozumiesz, to zobacz demo.

id i name służą do zupełnie różnych celów. Ogólnie nie możesz w CSS wybrać elementów według name, chyba że zrobisz coś takiego [name="value"], ale przecież dużo prościej jest dać id i w CSS użyć #. Name służy do nazywania pól w formularzach. Po więcej informacji odsyłam do stackoverflow.

komentarz 11 sierpnia 2015 przez Czort Nałogowiec (32,500 p.)

A jeszcze prościej dać klasę niż id:) Ogólnie bardzo dobrze wytłumaczone.

komentarz 11 sierpnia 2015 przez Gothdo Obywatel (1,810 p.)

@Czort Ogólnie w HTML i CSS nie chodzi o to, żeby było prościej, tylko o semantykę. Klas używa się do trochę innych celów. Id używa się do elementów, które są unikalne, a klas do tych, które mogą się powtarzać. Załóżmy, że masz pewnien element, który jest kontenerem wszystkich newsów - możesz dać mu id np. #news-list, dlatego że jest tylko jeden. Natomiast do samych newsów, których będzie wiele możesz dać klasę np. .news.

komentarz 11 sierpnia 2015 przez Comandeer Guru (600,810 p.)

Nie zgodzę się. Owszem, [id] dajemy elementom unikalnym, gdyż jest to atrybut służący do jednoznacznej identyfikacji elementu. Nie powinno się po nim jednak stylować - on służy jedynie do identyfikacji elementu (np. w JS czy ARIA) lub tworzenia punktów nawigacyjnych.

Do stylowania powinno używać się jedynie klas, najlepiej posiadających jak najbardziej płaską strukturę, żeby uniknąć problemów ze specyficznością selektorów CSS: http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf

Osobiście polecam konwencję nazewniczą wywodzącą się z architektury BEM: https://bem.info

odpowiedź 11 sierpnia 2015 przez Ivan Maniak (60,650 p.)

p a {}

będzie używane do KAŻDEGO TAGU 'a' w paragrafie np.

<p> <a>Kliknij tutaj </a>  <a>Tutaj też kliknij</a></p>

p > a {}

będzie tylko dla PIERWSZEGO TAGU 'a' np.

<p><a>DLA TEGO TAGU BEDZIE</a> <a>ALE DLA TEGO JUZ NIE BO JEST DRUGIM</a></p>

komentarz 11 sierpnia 2015 przez Gothdo Obywatel (1,810 p.)

Nie wprowadzaj w błąd. Do wybierania pierwszego tagu służy :first-child.

komentarz 11 sierpnia 2015 przez Wiciorny Ekspert (269,710 p.)

już wiem o co chodzi źle zrozumiałem POTOMEK TO NIE JEST RELACJA RODZIC DZIECKO ;]

Po prostu p może być dziadkiem dla a, i wtedy p a działa na tagach A natomiast jeżeli p>a to a o ile jest dzieckiem z 1 pokolenbia po p to zostanie zmieniony