Question

I am trying to make a button in a purely CSS way (I am trying to avoid javascript as much as possible)
I have the following code

CSS:

.Button a{
text-align:center;
vertical-align:middle;
background-color:transparent;
Height:100%;
color:white;
text-decoration:none;
}
.Button a:hover{
background-color:brown;
cursor:default;
}
.Button a:active{
background-color:gray;
}

Now, my problem is that I wish to change the background color of the outer element (the one with class as ‘Button’). The above code changes the background color of the element rather the the enclosing . Any ideas how I can get this (without using javascript)?

Answer 1

I am answering my own question, in the hope that the others, who might stumble upon this thread later on, can benefit if they have the same problem (so that they need to crawl the web as much as I did today :-P).

As, Elusive said, it is NOT possible to select a parent element through CSS-selectors.

And the code below worked for me:

a.Button {
text-align:center;
vertical-align:middle;
background-color:transparent;
display:block;
Height:100%;
min-width:100px;
color:white;
padding:3px 3px 3px 3px;
text-decoration:none;
}
a.Button:hover{
background-color:brown;
cursor:default;
}
a.Button:active{
background-color:gray;
}

I made the < a> element display style ‘block’. And I was able to achieve the effect I was looking for.