The .btn selector isn't universal?


#1

In the HTML & CSS Projects: MOVE there's something I'm confused about:

creating/modifying the following link code:

.btn:hover {*transition code*}

How come the button in the second "supporting" (it says "Learn More" with a white background) section wasn't affected by the transition even though it also has the same div class tag? Instead it had to be this:

a .btn:hover {*transition code*}

why does having div class="btn" tag not enough for the code to select it also?


#2

I have this same question. I don't understand why I have to add another .btn:hover entry after every different button - if I have a .btn class, shouldn't one .btn:hover entry apply to all of them? Example below of my css code that is not reaching all of my buttons:

.btn:hover {
	background: #ffa800;
	cursor: pointer; 
	transition: background .5s;  
}

Once I cut and pasted this immediately after my two other buttons, I received the desired effect.


#3

Is there another css selector within the same style sheet that is more specific than your .btn:hover{}; selector?

There could be something like this:

.container .btn {*code};

or something like that, which will override a more general selector.