simple css trick - is it possible?

Question

i am wondering whether this is possible: i have an id defined in css in this form.

#close{
  font-size:11px;
  text-decoration: underline;
}

#close:hover{
  cursor: pointer;
}

but here i have to repeat the definition of this id just to add hover event. is there any possibility to do something like this?

#close{
  font-size:11px;
  text-decoration: underline;
}:hover{cursor: pointer;}

this would save some extra typing..

Answer 1

You cannot do this in CSS, however you may find CSS preprocessers like SASS or LESS interesting. They allow you to next selectors, see this example in SASS:

.some-div {
    #close {
        font-size:11px;
        text-decoration: underline;

        &:hover {
            cursor: pointer;
        }
    }
}

This compiles to:

.some-div #close {
    font-size:11px;
    text-decoration: underline;
}
.some-div #close:hover {
    cursor: pointer;
}

Note that these aren't supported by browsers, you get programs to compile them which outputs CSS to include in your webpage.

Answer 2

well, in this particular case you could just have

#close{
    font-size:11px;
    text-decoration: underline;
    cursor: pointer;
}

As the pointer only displays when you're hovering anyway ;)

Otherwise i don't believe there are any syntax tricks, but you could use a precompiler like SASS