Panel użytkownika
Nazwa użytkownika:
Hasło:
Nie masz jeszcze konta?

[CSS] Selector "Child combinator"

Ostatnio zmodyfikowano 2020-02-19 22:39
Autor Wiadomość
DejaVu
Temat założony przez niniejszego użytkownika
[CSS] Selector "Child combinator"
» 2020-02-19 22:39:40
Poniższe notatki zamieszczone ku pamięci.

Problem

Mając CSS:
table.Klasa > tr > td { color: red; }
oraz kod HTML:
<table class="Klasa"><tr><td>tekst</td></tr></table>
Nie jest zmieniany kolor tekstu.

Rozwiązanie poprawne

Poprawić CSS:
table.Klasa > tbody > tr > td { color: red; }

Rozwiązanie 'naciągane'

Zmodyfikować CSS:
table.Klasa tr > td { color: red; }
Naciągane rozwiązanie, ponieważ w praktyce każdy zagnieżdżony <td> w kolejnych tabelach dostanie ten styl (nawet jeżeli nie będzie posiadał klasy). Innymi słowy: można doświadczyć skutków ubocznych przy złożonych zagnieżdżeniach.

Rozwinięcie tematu

https://stackoverflow.com​/questions/938083​/why-do-browsers-insert-tbody-element-into-table-elements
Especially annoying when you're trying to apply CSS styles through child selector: table > tr > td. You have to either use a descendant selector: table tr > td, or if you really want to be strict, cater to both cases: table > tr > td, table > tbody > tr > td – ADTC Jul 24 '16 at 13:16
<html>

<head>
<style>
td
{
color: blue;
}
table.SecondTable > tbody > tr > td.FirstTd
{
color: red;
}
</style>
</head>
<body>
<table class="FirstTable"><tr><td class="FirstTd">Should-be-default (no match)

<table><tr><td>world</td></tr></table>

</td></tr></table>

<table class="SecondTable"><tr><td class="FirstTd">Should-be-custom (match)

<table><tr><td>world</td></tr></table>

</td></tr></table>

<table class="SecondTable"><tr><td>third

<table><tr><td class="FirstTd">Should-be-default (no match when tbody is defined in CSS)</td></tr></table>

</td></tr></table>
</body>
</html>

/edit:
Poniżej jeszcze trochę 'wypocin' na temat dostawiania znacznika 'tbody' przez przeglądarki:
https://stackoverflow.com​/questions/938083​/why-do-browsers-insert-tbody-element-into-table-elements
P-176256
« 1 »
  Strona 1 z 1