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

CSS a{} tag only works not .container with my HTML Buttons

I’ve this problem, for example I need to change two Boxes separately but it’s not possible I can only edit them all via a{} tags. But I’d like to change them both in the different way.

<body>
    <div class="box1">
        <a class="TestButton1" href="#">Test1</a>
        <a href="#">Home</a>
        <a href="#">Contact</a>
    </div>
    <div class="box2">
        <a class="TestButton2" href="#">Test2</a>
        <a href="#">Home</a>
        <a href="#">Contact</a>
    </div>        
</body>

This doesnt work.

style.css
.box1 {
    text-decoration: none;
    margin-left: 50px; 
}

This works, but I need to edit boxes separately not all "a{}"

a{ 
    text-decoration: none;
    margin-left: 50px; 
}

I’ve this problem, for example I need to change two Boxes separately but it’s not possible I can only edit them all via a{} tags. But I’d like to change them both in the different way.

Tags:

2

Answers


  1. 0

    I did not understand properly but what i understand that i do if you have a image or create image what you want example then i can you help you properly

    <!DOCTYPE html>
<html>
<head>
    <style>
        .box1 a.TestButton1 {
            text-decoration: none;
            margin-left: 50px; 
            color: blue;
        }

        .box2 a.TestButton2 {
            text-decoration: underline;
            margin-left: 20px; 
            color: green;
        }
        .box1 a{
          color: red;
        }
        .box2 a{
          color: brown;
        }
        a {
            text-decoration: none;
            margin-left: 10px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <a class="TestButton1" href="#">Test1</a>
        <a href="#">Home</a>
        <a href="#">Contact</a>
    </div>
    <div class="box2">
        <a class="TestButton2" href="#">Test2</a>
        <a href="#">Home</a>
        <a href="#">Contact</a>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    In the following code:

    .box1 {
    text-decoration: none;
    margin-left: 50px; 
}

    you’re selecting the element with the box1 class, not the hyperlink tags inside of it, the margin is applied to the whole div and the div doesn’t have any text decoration to begin with so that does nothing.

    You need to select the children of each box, to do that use the children selector, more on that here.

    Here is how to select the children of each box:

    /* Selecting box1 */
div.box1 {
  background-color: rgb(10, 10, 10);
  
  /* Selecting it's 'a' children */
  & > a {
    text-decoration: none;
    color: rgb(170, 170, 250);
  }
}


/* Selecting box2 */
div.box2 {
  background-color: rgb(70, 70, 70);
  
  /* Selecting it's 'a' children */
  & > a {
    text-decoration: none;
    color: rgb(250, 170, 170);
  }
}
    <body>
  <div class="box1">
    <a class="TestButton1" href="#">Test1</a>
    <a href="#">Home</a>
    <a href="#">Contact</a>
  </div>
  <div class="box2">
    <a class="TestButton2" href="#">Test2</a>
    <a href="#">Home</a>
    <a href="#">Contact</a>
  </div>
</body>

    Additionally here are some of the things you can do with hyperlinks in CSS:

    /* Selecting box1 */
div.box1 {
  background-color: rgb(10, 10, 10);
      
  /* Selecting it's 'a' children */
  & > a {
    text-decoration: none;
    color: rgb(200, 200, 200);
  }
}


/* Selecting box2 */
div.box2 {
  background-color: rgb(60, 60, 60);
      
  /* Selecting it's 'a' children */
  & > a {
    text-decoration: none;
    color: rgb(150, 150, 150);
  }
}

div > a {

  /* Style to apply if the link has been visited */
  &:visited {
    opacity: .5;
  }
  
  /* Style to apply if the link has not been visited */
  &:link {
    filter: brightness(1);
  }
  
  /* Style to apply if the link is being hovered */
  &:hover {
    filter: brightness(1.5);
  }
  
  /* Style to apply if the link is being pressed */
  &:active {
    filter: brightness(2);
  }
}
    <body>
  <div class="box1">
    <a class="TestButton1" href="#">Test1</a>
    <a href="">Home</a>
    <a href="#">Contact</a>
  </div>
  <div class="box2">
    <a class="TestButton2" href="#">Test2</a>
    <a href="#">Home</a>
    <a href="#">Contact</a>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search