odsyłacze w html

pytanie zadane 15 stycznia 2021 w HTML i CSS przez Michalecekxd Użytkownik (830 p.)

Mam w HTML kilka odsyłaczy:.

<div id="lewypanel"><a href="strona.html">To jest strona</a></div>
<div id="srodkowypanel"><a href="strona2.html">To jest strona 2</a></div>
<div id="prawypanel"><a href="Regulamin.txt">czytaj regulamin</a></div>

Formatując odsyłacz w CSS dodaję np. a {color:red; }

Ale pytanie, co w przypadku gdy chcę sformatować TYLKO 1 konkretny odsyłacz(nie chcę aby FORMATOWAŁY się wszystkie odsyłacze). Np, chce jedynie dodać kolor dla odsyłacza umieszczonego w srodkowympanelu. Jak to zrobić?

2 odpowiedzi

odpowiedź 15 stycznia 2021 przez CSSoup Mądrala (6,460 p.)

Jest na to dużo sposobów:

- Możesz mu na przykład nadać klasę

<a class="twoja-klasa" href="strona2.html">To jest strona 2</a>

i odwołać się do niej w CSS

.twoja-klasa {
  color: red;
}

- Odwołać się do tego elementu jako bezposredniego potomka W CSS

#srodkowypanel > a {
    color: red;
}

- Odwołać się do elementu po prostu jak do potomka

#srodkowypanel a {
    color: red;
}

Jest jeszcze kilka opcji, ale ja wymieniłem ci najbardziej podstawowe :)

komentarz 15 stycznia 2021 przez CSSoup Mądrala (6,460 p.)

A na przyszłość możesz sobie poczytać o pseudo-klasach takich jak

:nth-of-type

:nth-child

:last-of-type

:last-child

:first-child

:first-of-type

komentarz 15 stycznia 2021 przez Michalecekxd Użytkownik (830 p.)

dziekuje bardzo

1	komentarz 15 stycznia 2021 przez VBService Ekspert (253,300 p.) Do pełni listy możliwości, które podał @CSSoup, trzeba dodać "przypisanie" po id <div id="lewypanel"><a id="lewypanel-link" href="strona.html">To jest strona</a></div> #lewypanel-link { color: red; }

komentarz 15 stycznia 2021 przez CSSoup Mądrala (6,460 p.)

Można, jak najbardziej :D

1	komentarz 15 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.) Warto dodać, żeby unikać stylowania po id, a robić to po klasie → https://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816

odpowiedź 15 stycznia 2021 przez VBService Ekspert (253,300 p.)
edycja 15 stycznia 2021 przez VBService

Do pełni listy możliwości, które podał @CSSoup, trzeba dodać "przypisanie" po id

<div id="lewypanel">
    <a id="lewypanel-link" href="strona.html">To jest strona</a>
</div>

#lewypanel-link {
    color: red;
}

[ edit ]
ale

@ScriptyChris
Warto dodać, żeby unikać stylowania po id, a robić to po klasie → https://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816

a także tzw. selektora atrybutu (w tym przypadku href, który zawiera ciąg znaków - stringa - .php)

<div id="lewypanel">
  <a id="lewypanel-link" href="strona.html">To jest strona</a>
</div>
<div id="srodkowypanel">
  <a href="strona2.html">To jest strona z linkiem do html</a>
  <a href="strona2.php">To jest strona z linkiem do php</a>
  <a href="strona2.html">To jest strona z linkiem do html</a>
</div>
<div id="prawypanel">
  <a href="Regulamin.txt">czytaj regulamin</a>
</div>

#srodkowypanel a[href*=".php"] {
  color: green;
  transition: color 1s ease-out;
}
#srodkowypanel a[href*=".php"]:hover {
  color: red;
}
#srodkowypanel a:not([href*=".php"]):hover {
  color: orange;
}


a {
  display: block;
  font: 1.1em/1.25em monospace;
}
div {
  margin-bottom: 1em;
}
div:before {
  content: attr(id);  
}