Customize css link as per url

Asked

Viewed 244 times

3

I’ve seen somewhere that has how to apply a certain css to a "to" if you have a certain text in the link, but can no longer find.

For example, I have the following links in my html

<a href="http://site.com.br/nothing">Link para nada</a>
<a href="http://site.com.br/something"><Link para alguma coisa</a>
<a href="http://other.com.br/something"><Link para alguma coisa</a>

Suppose you only want the link you have Something in the href have a different style, how could you do it?

css
  • 1

    @devgaspa The two answers are correct, but I accepted Alan’s because it was the first post.

  • @Alanrezende had not clearly written what he needed, I edited the question by adding another link. What I need to consider is just a part of this link (Something). Using your answer I found already how to do, in css just use the "" right after href - a[href="Something"].

2 answers

3


use for example

a[href="http://site.com.br/something"]{
    font-size: 30px;
}

To consider only a part of the url, just use a * right after href

a[href*="something"]{
    font-size: 30px;
}
  • 3

    https://css-tricks.com/snippets/css/style-links-depending-on-destination/ Complete documentation with external, internal and absolute link reference.

3

Using this selector.

a[href="http://site.com.br/nothing"] {
  color: red;
}

Reference.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.