რთული სელექტორები ბმულების მდგომარეობებთან CSS-ში

ყველა რთული სელექტორი, რომელსაც აქამდე ვსწავლობდით, შეიძლება გამოყენებულ იქნას ბმულებისთვისაც.

მოდით შევხედოთ მაგალითს. დავუშვათ, ჩვენი ბმულები მდებარეობს ბლოკში მინიჭებული id-ით:

html<div id="block">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

მოდით მივანიჭოთ სტილები ამ ბლოკის ბმულებს:

css#block a:link, #block a:visited {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

როგორც წესი, link და visited მდგომარეობებს არ აცალკევებენ, ამიტომ კოდის გამარტივება შესაძლებელია შემდეგნაირად:

css#block a {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

css#test a {
  color: red;
}
#test a:hover {
  text-decoration: none;
}