Style an anchor

[Ayala]

If I use the :target, I can style the target, but in the same time I want to style the anchor, too.

This is my example:

http://codepen.io/una/pen/jrxbZq

I can give an id to every link:
< a href=”#slide-1″ >< /a >

In CSS:

#slide-1:target ~ .buttons #button1 {
background: red;
}

The result:

http://codepen.io/Ayalann/pen/jrJRyL

I have 2 questions:
1. How can I make it easier? Because in this case I have to write it on every single links.
2. How should I refer the < li > correctly? (I want to change the whole background red)

[Shikkediel]

I don’t think there’s a way to make it shorter.

For the second point you can use display: block (and add a border-radius) on a.

Edit – if the HTML is rewritten, there might be a more straightforward approach with the styling, using the + selector instead like with the initial example I posted in the previous topic. You can’t use an ul for the buttons in that case though.

[Shikkediel]

That last part is also a trade off because then the buttons need individual positioning:

Link

Then again, maybe SCSS can be smarter with that (I’m unfamiliar and not aware myself).

[Shikkediel]

Yep, looks like you can create loops based on variables, nth-types and what not with SASS. So the best answer would likely come from that direction since you’ve seemed to be using it in the examples.

[Author]

Posts