Da się zrobić aby a href miał inny kolor tylko w jednej sekcji?

Question

Cześć. Mam taki problem iż potrzebuję aby a:hover zmieniał kolor tylko w jednym miejscu, a nie na całej stronie da się to jakoś zrobić?

Answer 1

Jeżeli ma to być tylko jeden unikalny selektor wybrałbym selektor id

https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

https://www.w3.org/TR/CSS21/selector.html%23id-selectors

<a id="unique" href="#">only one element on the website</a>

#unique{
  text-decoration: none;
  font-size: 4.2vw;
}
#unique:hover{
  text-decoration: none;
  color: gold;
  font-size: 4.2vw;
}

 

Pozdrawiam i Powodzenia

Comments

Tyle, że id nie gwarantuje unikalności na poziomie CSS.

https://bzdety.comandeer.pl/id.html

---

Super ! jak zwykle można na Ciebie liczyć... I czegoś ciekawego się dowiedzieć.

Bardzo Dziękuje

 

Answer 2

Najpoprawniej będzie nadać temu elementowi klasę:

<a class="nazwa_klasy" href="#">Przykładowy tekst</a>

.nazwa_klasy:hover{
color: red;
}

 

Comments

Myślę, że lepszym sposobem byłoby wykorzystanie selektorów dzieci lub potomków, np.:

nav ul li a:hover {
color: orange;
}

main a:hover {
color: magenta;
}

 

---

A później projekt się rozrasta, przenosisz element w inne miejsce, lub coś doklejasz w środek i przestaje działać  bo nie pamiętasz już swojego kodu oraz co gdzie było ze sobą powiązane. Co jeśli np. koncept się zmieni i "ul" zmieni się w "ol", lub obok dokleisz kolejne "ul". Dodatkowo w tej chwili ten link ma wyglądać tylko tutaj w ten sposób, ale jeśli będę go potrzebował w innym miejscu, to cyk, mam przewidzianą klasę. Ja widzę taki link jako moduł wielokrotnego użytku. Mimo, że z 2012 roku, to moim zdaniem artykuł pod wieloma względami nadal aktualny:

https://csswizardry.com/2012/05/keep-your-css-selectors-short/

Jeśli uważasz, że Twoje rozwiązanie zapewnia więcej korzyści, to proszę o wytłumaczenie :D

---

Tak masz pewną rację, ale moja propozycja rozwiązania odnosiła się do głównych elementów strony, daltego w html5 wprowadzono nowe ułatwiające życie znaczniki jak header, nav, main, aside, footer, aby ograniczyć ilość używanych id i klass do niezbędnej ilości. Stylizując elementy o zmiennej lub bardziej skomplikowanym drzewie DOM jak najbardziej można używać klas. Czsami użycie klasy lub identyfikatora jest niezbędne, gdyż mają wyższą specyficzność. Dziękuję za Twoją uwagę.