Question 234289 in Html Question posted in
Some basic documentation can be found here.

Html – How to style links before line break element

Is there a way to style only the links that appear before the line break element?

I would like to style Link 1 and Link 2 only.

<ul>
    <li>
        <a href="#">Link 1</a> and <a href="#">Link 2</a>
        <br>
        word word word word word word <a href="#">Link 3</a>
    </li>
</ul>

I know I can easily inline the style but I was wondering if there is another way to go about doing this.

Tags:

5

Answers


  1. 0

    Yes you can use a sibling combinator

    a {
    background-color: pink;
}

br + a {
    background-color: transparent;
    color: red;
}
        <ul>
        <li>
            <a href="#">Link 1</a> and <a href="#">Link 2</a>
            <br>
            word word word word word word <a href="#">Link 3</a>
        </li>
    </ul>
    Login or Signup to reply.
  2. 0

    You can use :not to select only those a elements that are not after a br element.

    This is a simple example. You could get more complex and ignore all a elements that are children of elements which follow a br for example.

    a:not(br ~ a){
    color: red;
}

 
        <ul>
        <li>
            <a href="#">Link 1</a> and <a href="#">Link 2</a>
            <br>
            word word word word word word <a href="#">Link 3</a>
        </li>
    </ul>
    Login or Signup to reply.
  3. 0

    I don’t know any selector that would select specifically that anchor but you can do this:

    a:not(br + a) {
  font-size: 100px;
}
    <ul>
        <li>
            <a href="#">Link 1</a> and <a href="#">Link 2</a>
            <br>
            word word word word word word <a href="#">Link 3</a>
        </li>
    </ul>

    But I wouldn’t do it. Better to put them into a div and style that way.

    Login or Signup to reply.
  4. 0

    You can use id="link_1" and after and then format it with css. but on the css side
    You must define #link_1 as {…}. So only link1 and link2 will get styling.
    for example:

    h<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #link_1{
            text-decoration: none;
            font-family: Arial, Helvetica, sans-serif;
            color: red;
        }
    </style>
</head>
<body>
    <a href="" id="link_1"> hakjsdhadkjha </a>
</body>
</html>
    Login or Signup to reply.
  5. 0

    You can do this with the :has() selector if you’re happy with it not working in Firefox (but will soon, hopefully).

    If you use this without the :has() selector, you will change the color of all your anchors, but not the ones after a line break.

    If you only want to style the anchors in this manner when they are in a list or any other condition, replace the wildcard selector with the relevant element or a utility class.

    /* Style only the anchors in elements that have line breaks, but not the ones after the line break */
*:has(br) > a:not(br ~ a) {
  color: hotpink;
}
    <ul>
    <li>
        <a href="#">Link 1</a> and <a href="#">Link 2</a>
        <br>
        word word word word word word <a href="#">Link 3</a>
    </li>
    <li>
      <a href="#">I won't be hotpink</a>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search