DEV Community

loading...
Cover image for CSS Link Style 🎨

CSS Link Style 🎨

Suprabha
πŸ”₯ New JS, CSS, HTML articles every week πŸ”₯ Frontend engineer @gojekindonesia πŸ‘©πŸ»β€πŸ’» http://instagram.com/suprabhasupi
・3 min read

Using CSS, links can be styled in many different ways.

We can change the style of CSS link as:

  1. :hover
  2. :active
  3. :visited
  4. :focus
  5. :focus-within
  6. :focus-visible

1. :hover

The :hover CSS pseudo-class triggered when the user hovers over an element with the cursor.

a:hover {
    color: red
}
Enter fullscreen mode Exit fullscreen mode

If you are using :link, :visited, :active. Remember to add hover after link and visited according to LVHA-order: :link β€” :visited β€” :hover β€” :active.

2. :active

The :active CSS pseudo-class starts when the user presses down the primary mouse button.

a:active {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

The :active pseudo-class is commonly used on <a> and <button> elements.

3. :visited

The :visited CSS pseudo-class represents links that the user has already visited.

a:visited {
    color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

4. :focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

input:focus {
    background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

NOTE πŸ“ Never remove the focus outline

Checkout the codepen where you play and understand how hover, active, visited and focus are working.

5. :focus-within

The :focus-within CSS pseudo-class represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.

div:focus-within {
    background: cyan;
}
Enter fullscreen mode Exit fullscreen mode

6. :focus-visible

The :focus-visible pseudo-class applies to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).

.focus-visible:focus-visible {
    background: pink;
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Why do we need :focus-visible?

:focus also do that same right? πŸ€”
But there is one problem. So imagine you wanted to remove outline of some button or links. Then it would be little bit problematic for those user who tries to access through keyboard.

Here we can use :focus-visible, which applies when you actually want a visual indicator to help the user for focus to see.

Checkout the codepen here πŸ‘‡

Reference 🧐

Buy Me A Coffee

🌟 Twitter πŸ‘©πŸ»β€πŸ’» suprabha.me 🌟 Instagram

Discussion (5)

Collapse
programmerno24 profile image
Darsh • Edited

Can i talk to you at dev.to/connect

Collapse
suprabhasupi profile image
Suprabha Author

Yeah sure

Collapse
programmerno24 profile image
Darsh

For that you will have to go to my profile and follow me the a chat button will appear click that button to massesge me via dev.to/connect

Thread Thread
suprabhasupi profile image
Suprabha Author

After following you, didn’t get it. Try it from once your side

Thread Thread
siddharthshyniben profile image
Siddharth

You have to mutual follow to connect I guess...