Poniższy kod nie działa (nie oczekiwałem, że będzie działał), ale pokazuje co chcę uzyskać.
div.content
{
text-align:center;
white-space:pre;
tt.color:red;
}
Chcę uzyskać zmianę wyglądu elementu (tt) ale tylko wtedy gdy ten element znajduje się wewnątrz kontenera mającego klasę. Jest prosty sposób?
No najprościej to tak:
div.content tt {
color: red;
}
SASS ma bardzo ciekawą składnię, która pozwala na coś takiego:
div.content {
text-align:center;
white-space:pre;
tt {
color:red;
}
}
Oczywiście tego SASSa trzeba skompilować do CSSa później.
Chcę uzyskać zmianę wyglądu elementu (tt)
używasz przestarzałego znacznika:
Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt
nawet nie mam pojęcia do czego to służyło, ale wg MDN to coś jak obecne <code>.
ale tylko wtedy gdy ten element znajduje się wewnątrz kontenera mającego klasę. Jest prosty sposób?
oprócz tego co @aurel napisała, mógłbyś po prostu przypisać klasę
HTML:
<code class="qwerty"></code>
(zamiast qwerty oczywiście można nazwać bardziej mądrze, tak żeby odzwierciedlało to przeznaczeniu tej klasy. Ale nie wiem, do czego to potrzebujesz).
.qwerty {
color: red;
}
ma to tę zaletę, że u nie uzależniasz stylów ani od pojemnika (będziesz mógł wyjąć to z .content i będzie tak samo działać), ani od tagu (możesz zamienić tt na code czy na inny znacznik i będzie tak samo działac)
Dziękuję za pomoc, zareagowałem z opóźnieniem bo byłem odcięty od internetu.
Nie lepiej:
.content
{
text-align: center;
white-space: pre;
}
.content__link {
color: red;
}
?
Może i lepiej, a jakby to wyglądało, gdybym chciał zmieniać kolor (wygląd) dla a, a:hoover, a:visited i a:active w różny sposób? W metodzie zaproponowanej przez @aurel wiem jak to robić
:hover i :visible można dodawać też do klas, np. .content__link:hover