Kolorowanie co drugiego elementu CSS i jQuery – działania seryjne

Czas czytania: 2 minut

Istnieje wiele metod kolorowania obiektów HTML takich jak tabela czy <div>. W tym wpisie postaram się przedstawić jedną z nich polegającą na kolorowaniu co drugiego elementu.

Jak zmienić kolor elementu HTML

Często do zmiany koloru tła danego wiersza w tabeli lub elementu <div> dodaje się osobne klasy do konkretnego elementu.  Jest to dość czasochłonne, często można się przy tym pomylić a dodanie nowego elementu niekiedy bywa problematyczne. Czasami można bowiem zapomnieć, że co 2 element miał mieć jakaś dodatkową klasę lub jakieś style.

Jak tego uniknąć? W brew w pozorom w całkiem łatwy i przyjemny sposób. Pomogą nam w tym pseudo elementy.

Kolorowanie elementów HTML – CSS3 – :nth-child()

Na początek chciałam pokazać jak pokolorować wiersze tabeli bez konieczności ingerowania w jej strukturę. Dzięki tej metodzie inne tabele będą mogły również posiadać ten sam wygląd. A my nie będziemy musieli tracić czasu na dodawanie niepotrzebnych elementów.

Sposób 1 – co drugi wiersz / element

1	aaa
2	bbb
3	ccc
4	ddd
5	eee

Kod CSS przykładu

.css-s1 tr:nth-child(2n+1) {
    background: #ccc;
    padding: 9px;
}

W tym przypadku zastosowaliśmy pseudo klasę :nth-child z wartością 2n+1. Dzięki takiemu warunkowi kolorujemy dokładnie co 2 element. Działanie to jest cykliczne.

Sposób 2 – kolorowanie tylko parzystego elementu / parzystego wiersza

1	aaa
2	bbb
3	ccc
4	ddd
5	eee

.css-s2 tr:nth-child(even) {
    background: #ccc;
    padding: 9px;
}

Tym razem użyliśmy :nth-child z wartością even. even odnosi się do elementów parzystych. W tym układzie zostaną więc pokolorowane wiersze parzyste.

Sposób 3 – Kolorowanie kolumn tabeli – parzysta kolumna

1	aaa
2	bbb
3	ccc
4	ddd
5	eee

.css-s3 td:nth-child(even) {
    background: #ccc;
    padding: 9px;
}

Jak wspomniałam już wcześniej można również w ten sposób kolorować inne elementy HTML. Przykładowo co drugi akapit będzie posiadał tło w innym kolorze:

.css-s4 p:nth-child(even) {
    background: #ccc;
    padding: 9px;
}

Tekst wygląda w kodzie tak

<div class="css-s4">
  <p>1 Przykładowy tekst</p>
  <p>2 Przykładowy tekst</p>
  <p>3 Przykładowy tekst</p>
  <p>4 Przykładowy tekst</p>
  <p>5 Przykładowy tekst</p>
</div>

Jak zapewne część osób zauważyła do kolorowania tabel i tekstu użyłam pseudo-klas. Nie są one niestety obsługiwane przez wszystkie przeglądarki internetowe lub bywają nieco inaczej interpretowane.

Kolorowanie elementów HTML z pomocą jQuery

W przeciwieństwie do kodu powyżej jQuery (popularna biblioteka JavaScript) jest obsługiwana przez większość przeglądarek.
Do tego przykładu użyję kodu:

$("div.divdekor:odd").addClass("color1");
$("div.divdekor:even").addClass("color2");

Co to znaczy odd i even?

W tym miejscu dobrze sobie wyjaśnić co właściwie oznaczają słowa po dwukropku. A więc

• even – to element parzysty
• odd – to z kolei nieparzysty

Odd i Even może być również stosowane przy odwołaniach CSS tak jak ja zrobiłam to powyzej

Czyli użyję ponownie tej samej zasady co wyżej. Kod tej doda do konkretnych elementów dodatkowe klasy posiadające odpowiednie właściwości

DEMO

Przykładowa tabela

<table class="tabledekor">
<tbody>
<tr>
  <td>1</td>
  <td> aaa</td>
  <td></td>
</tr>
<tr>
  <td>2</td>
  <td> bbb</td>
  <td></td>
</tr>
<tr>
  <td>3</td>
  <td> ccc</td>
  <td></td>
</tr>
<tr>
  <td>4</td>
  <td> ddd</td>
  <td></td>
</tr>
<tr>
  <td>5</td>
  <td> eee</td>
  <td></td>
</tr>
</tbody>
</table>

Kod CSS z demo

.color1{
background:#ccc;
}
.color2{
background:#eee;
}

Kod jQuery

$("div.divdekor:odd").addClass("color1");
$("div.divdekor:even").addClass("color2");

$(".tabledekor tr:odd").addClass("color1");
$(".tabledekor tr:even").addClass("color2");

Uwaga: Kod jQuery wymaga dodania odpowiedniej biblioteki na stronie powyżej skryptu np.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Do czego nam to potrzebne
Przeważnie kolorujemy tabelę, wiersz, div np. poprzez przyciemnienie co drugiego wiersza w celu poprawy jej czytelności.
Położone blisko siebie elementy często stają się nieczytelne nawet jeśli oddziela ja widoczna linia. W efekcie jedynym dobrym sposobem jest dokonanie czegoś w rodzaju odcięcia – uzyskujemy je właśnie dzięki innej barwie kolejnego elementu.

W rzeczywistości nie jesteśmy ograniczeni do 2 kolorów, jednak zbyt duża ilość barw może być bardzo męcząca dla ostatecznego odbiorcy.

Dodatkowe tagi:

• Ustalanie wyglądu tabeli za pomocą CSS
• parzysty nieparzysty
• CSS: Ładne tabelki
• naprzemienne tło wierszy w tabeli