If i use CSS to target a Class attribute inside an <a> element, what exactly am i modifying?

<a class="insidebutton" href="http://google.com"/ target="_blank"><button>Google</button> </a>

This is my code. Now, if i target <a> element, i can increase the height of that block that contains the button, i can add a background color between the button and the entire block. But i can't do that if i target the Class insidebutton.

When i target the Class, i can only adjust the button inside the element to be in the middle, but why is it that i can't change the background or the height of the entire element block like i can when i target the element <a>? What exactly am i modifying when i target the Class attribute in this example? If i can adjust the button in the middle by targeting Class, does that mean that, targeting Class means the CSS is applies to the elements inside that Class? And not the entire element itself, since Class is not an element? and that's why you can't change the background because Class does not have a background, wheres <a> does have since it applies to the entire element block, wheres Class is not a block?

Did i get it right?

1 Answer

Relevance
  • Chris
    Lv 7
    5 months ago
    Favorite Answer

    A class is just a tool to easily put a bunch of elements in a group. Nothing more, nothing less. CSS always ultimately changes the style of elements; which elements is determined by the selector, and that selector can make use of classes to target a bunch of elements.

    To target the button you need a selector like

    .insidebutton button

    If you use just

    .insidebutton

    instead you're targeting the <a>, but some properties are inherited by child elements so you're probably also going to change properties of the button.

    The more important question to me is: what are you trying to achieve, and how exactly has it failed so far? And why are you putting a button inside a <a> in the first place?

Still have questions? Get your answers by asking now.