Selektory potomka, dziecka, rodzeństwa i atrybutów

Zestawienie kombinatorów CSS:

• Spacja (A B) – selektor potomka: wybiera wszystkie elementy B wewnątrz elementu A na dowolnym poziomie zagnieżdżenia.
• A > B – selektor bezpośredniego dziecka: wybiera elementy B, które są bezpośrednimi dziećmi A.
• A + B – selektor bezpośredniego sąsiada: wybiera element B znajdujący się bezpośrednio po A.
• A ~ B – selektor ogólnego rodzeństwa: wybiera wszystkie elementy B poprzedzone elementem A.
• input[type="text"] – selektor atrybutu o dokładnej wartości.
• [href^="https"] – atrybut zaczynający się od podanego ciągu.

/* Tylko paragrafy będące bezpośrednimi dziećmi sekcji: */
section > p {
    color: #333;
}

/* Pierwszy akapit bezpośrednio po nagłówku h2: */
h2 + p {
    font-weight: bold;
}

Najczęstsze pułapki na egzaminie INF.03:

• Zadania egzaminacyjne regularnie sprawdzają różnicę między div p (wszystkie paragrafy w divie) a div > p (tylko bezpośrednie dzieci).