Możesz odwoływać się do tzw. elementów potomnych. Są to takie, które są bezpośrednio podrzędne innym elementom. Brzmi to abstrakcyjnie, ale można to ładnie wyjaśnić na przykładzie.
<body> <p>Akapit 1</p> <p>Akapit 2</p> <p>Akapit 3</p> </body>
Tutaj body jest elementem nadrzędnym. Elementy p są każdorazowo elementami potomnymi body. Na tej wiedzy można skorzystać, stosując selektor elementów potomnych.
body>p {
color: blue;
}
Ta składnia ustala, że wszystkie akapity będące bezpośrednimi dziećmi body zostaną zmienione na kolor niebieski.
Następny przykład jeszcze raz pokazuje różnice między dwoma instrukcjami body p i body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Akapit 1</p>
<p>Akapit 2</p>
<p>Akapit 3</p>
<div>
<p>Akapit 4</p>
</div>
</body>
</html>Pierwsze trzy zdefiniowane akapity p są bezpośrednimi dziećmi body. Instrukcja body p przypisuje wszystkim akapitom kolor niebieski. body>p natomiast działa wyłącznie na pierwsze trzy akapity. Dlatego te akapity są wyświetlane większą czcionką.
Następnie chciałbym przedstawić Wam selektor następnego elementu. Ten selektor wskazuje element, który natychmiastowo następuje po innym elemencie i ma ten sam element nadrzędny. Ponownie przykład:
h1+p {
color: blue;
}
Ta składnia ustawia kolor tekstu akapitu na niebieski. Jednakże tyczy się to wyłącznie sytuacji, gdy akapit następuje bezpośrednio po nagłówku pierwszego rzędu.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>Akapit 1</p>
<h2>Nagłówek</h2>
<p>Akapit 2</p>
<p>Akapit 3</p>
<div>
<p>Akapit 4</p>
</div>
</body>
</html>Sprawdź efekt w przeglądarce.
Tylko pierwszy akapit jest wyświetlany w niebieskim kolorze tekstu. Pozostałe akapity są czarne. Wynika to z faktu, że te elementy p nie następują po h1, ale po h2.
W CSS3 wprowadzono dodatkowe możliwości związane z elementami następnymi. Od teraz można mieć dostęp do wszystkich elementów następujących po określonym elemencie. Przykład:
h1~p {
color: red;
}
Ta składnia odnosi się do wszystkich akapitów, które następują po h1.
Można również odwoływać się nie tylko do elementów bezpośrednio. Możliwe jest również dostęp do atrybutów elementów.
Oto kilka takich selektorów:
• [att] – Element musi zawierać tylko atrybut. Czy wartość zostanie przekazana, jest bez znaczenia.
• a[href] – Zaznacza wszystkie hiperłącza (<a href=…>). Nie dotyczy to jednak definicji kotwic (<a name=…>).
• [align=left] – Zaznacza wszystkie elementy, których atrybut align ma wartość left.
• [attr~=wert] – Zaznacza wszystkie elementy, w których wert jest zawarty na liście wartości oddzielonych spacjami.
• [attr|=wert] – Zaznacza element, jeśli wartość podana w atrybucie znajduje się na początku łańcucha znaków oddzielonych myślnikami.
• img[width="200"] – Tutaj zaznaczane są wszystkie obrazy o szerokości 200 pikseli.
Oczywiście pojawia się pytanie, kiedy tak naprawdę można potrzebować tych selektorów atrybutów. Zastanów się na przykład nad formularzem i zdefiniowanymi w nim polami wyboru. Pola wyboru są – jak już wiecie – definiowane przez element input. Problem w tym: Element input jest również używany do definiowania normalnych pól tekstowych. Dlatego nie można ustawić różnego formatowania dla pól wyboru i pól tekstowych. Tutaj właśnie zaczynają działać selektory atrybutów. Dla lepszego zrozumienia spójrz na poniższy przykład:
<body> Nazwa: <input type="text" id="name" /> <br /> Mężczyzna: <input type="checkbox" name="geschlecht" id="geschlecht" /> <br /> Kobieta: <input type="checkbox" name="geschlecht" id="geschlecht" /> </body>
Zdefiniowano różne elementy formularzy.
• pole tekstowe
• dwa pola wyboru
Te pola powinny zostać sformatowane.
input {
border:3px solid #000;
width: 10em;
}Pola otrzymują obramowanie i szerokość.
Problem polega na tym, że zdefiniowana szerokość powinna być stosowana tylko do pola wprowadzania tekstu, a nie do pól wyboru. Jednak selektor elementu nie pozwala na odróżnienie między różnymi typami pól. Aby możliwe było takie rozróżnienie, stosuje się selektory atrybutów. Oto przykład, jak to może wyglądać:
input[type="checkbox"] {
width: auto;
}
Z wykorzystaniem tego selektora faktycznie wybierane są tylko te elementy input, które posiadają kombinację atrybutu-wartość type="checkbox".
Powtórzenia
CSS w końcu oferuje możliwość obsługi powtórzeń. Oczywiście pojawia się pytanie, do czego może to być dobre. Te selektory są przydatne na przykład wtedy, gdy chcemy każdy drugi wiersz tabeli stylować inaczej. Zanim przedstawię dostępne selektory, oto bardzo typowy przykład:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
To jest zwykła lista punktowana. Za pomocą CSS chcemy teraz przypisać każdemu trzeciemu elementowi listy kolor tła.
Do tego celu używany jest selektor nth-child(). Za jego pomocą możemy odwołać się do każdego n-tego elementu potomka.
#sprachen li:nth-child(3n) {
background-color: red;
}
Dostępne są następujące selektory:
• :root - Za pomocą selektora :root można odwołać się do korzenia dokumentu.
• :nth-child(n) - Obsługuje każdy n-ty element wewnątrz elementu nadrzędnego. Ten selektor jest szczególnie przydatny, gdy chcemy różnorodnie stylować wiele elementów. Parametr n jest ustalonym słowem kluczowym, które można wykorzystywać w operacjach matematycznych. n można ustawić na wartość 1.
• :nth-last-child(n) - Obsługuje każdy n-ty element wewnątrz elementu, poruszając się wstecz po elementach potomnych.
• :nth-of-type(n) - Obsługuje każdy n-ty element tego samego typu HTML na tym samym poziomie.
• :nth-last-of-type(n) - Obsługuje każdy n-ty element tego samego typu na tym samym poziomie, poruszając się wstecz po elementach.
• :first-child - Obsługuje pierwszy element potomny w obrębie elementu.
• :last-child - Obsługuje ostatni element potomny w obrębie elementu.
• :first-of-type - Obsługuje pierwszy element tego samego typu HTML w obrębie elementu nadrzędnego.
• :last-of-type - Obsługuje ostatni element tego samego typu HTML w obrębie elementu nadrzędnego.
• :only-child - Obsługuje element, który nie ma rodzeństwa i jest jedynym elementem potomnym w obrębie elementu nadrzędnego.
• :only-of-type - Obsługuje element, który nie ma rodzeństwa tego samego typu HTML i jest jedynym elementem tego typu w obrębie elementu nadrzędnego.
• :empty - Obsługuje puste elementy.
Przedstawione selektory ułatwiają pracę z HTML, eliminując potrzebę skomplikowanych definicji klas znane z przeszłości.
