CODEWITHSUNDEEP
htmlcss
doniyor
doniyor

Reputation: 37934

simple css trick - is it possible?

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

Upvotes: 4

Views: 149

Answers (3)

FelipeAls
FelipeAls

Reputation: 22171

Nobody is working on this in W3C CSS Working Group as far as I can tell (*)

There're:

  • preprocessors, (see other answers),
  • there is copy-pasting,
  • maybe a CSS ZenCoding/Emmett plugin (never heard of it though and it's not needed as badly as Emmett is for HTML),
  • maybe a macro like "go copy the last line of my CSS file with a { at its end and the previous lines if they end with a comma"
  • AND there are methodologies like OOCSS, BEM, etc that will keep the need of nesting selectors down to 1 or 2 levels, that is only the pseudos and from time to time a second class (barely no id, just classes are used)

(*) It's barely needed in the browser imo. DRY things in CSS I can think of are classes, :matches() (previously known as :-vendor-any() ) and inherit, initial values, "variables" and a new all property (all these things are only related by the fact they avoid longer tasks, it's quite unrelated to your question ;) )

Upvotes: 1

Mupps
Mupps

Reputation: 346

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

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50259

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.

Upvotes: 6

Related Questions