Selektory CSS 6. Dzieci, potomkowie, bracia

W tej lekcji pokażę Ci czym są potomkowie, bracia i dzieci w selektorach CSS oraz jak posłużyć się informacją o pokrewieństwie, by zaznaczyć element, o który nam chodzi.

Przewodnik po selektorach CSS i XPath

Przy lekcjach dotyczących selektorów CSS i XPatha, a już szczególnie przy zadaniach, pomocny się może okazać przewodnik po selektorach CSS i XPath.

>> Dostaniesz go tutaj

Potomkowie, bracia i dzieci w selektorach CSS

W selektorach CSS możemy posłużyć się kilkoma stopniami pokrewieństwa elementów, by zaznaczyć jakiś element. Takie podejście nam się przyda, gdy nie będziemy w stanie zbudować unikatowego selektora posługując się jedynie jego tagiem lub atrybutami. Takie rozwiązanie będzie też dobre na wypadek mało eleganckich selektorów (np. wtedy, gdy elementy mają bardzo nieczytelnie i mało mówiące wartości atrybutów) albo bardzo skomplikowanych.

Dzieci i rodzice

O dzieciach w kontekście selektorów CSS będę mówić, gdy jeden element będzie się znajdował bezpośrednio wewnątrz innego, np.

<div>
  <input></input>
<div>

W tym wypadku element input jest dzieckiem elementu div, a element div jest rodzicem elementu input. W filmie pokazuję jak wykorzystać o rodzicu do zaznaczenia dziecka.

Potomkowie i przodkowie

Tutaj sytuacja jest podobna jak w przypadku dzieci i rodziców z tą różnicą, że potomek może się znajdować dowolnie „głęboko”.

<div>
  <label>
    <span></span>
  </label>
  <input></input>
  <button></button>
<div>

W powyższym przykładzie element div jest przodkiem zarówno elementów labelinput i button (dla których jest również rodzicem) jak i dla elementu span który jest dzieckiem elementu label. Analogicznie w drugą stronę – wszystkie wymienione przeze mnie elementy są potomkami elementu div. Drzewo może być dowolnie rozrośnięte w głąb – tutaj najgłębiej leży span, ale nic nie stoi na przeszkodzie, żeby tych poziomów było więcej.

Bracia

Bracia to elementy, które mają wspólnego rodzica, np. w powyżej już pokazanym przykładzie braćmi będą elementy labelinput oraz button. Co ważne, w selektorach CSS mamy możliwość wskazania jakiegoś elementu jedynie na podstawie poprzedzającego go brata. Pokazuję dokładnie o co mi chodzi na filmie.

Wsparcie merytoryczne

Nie masz dostępu do wsparcia merytorycznego dla tego kursu. Wykup dostęp albo zaloguj się, by móc zadawać pytania.