simple css trick - is it possible?

css, html

Solution

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.

Problem

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..

Original source