Pseudo Classes¶
Using the filename¶
Using the filename of the source images you can customize the pseudo class related to the images, so if you simply append __hover
to the filename glue
will add :hover
to the CSS class name:
buttons
├── pay.png
└── pay__hover.png
Using this simple convention you can create for example create button sprites like:
And generate automatically the following css:
.sprite-buttons-pay{background-image:url(buttons.png);background-repeat:no-repeat}
.sprite-buttons-pay:hover{background-position:0px 0px;width:174px;height:62px;}
.sprite-buttons-pay{background-position:0px -62px;width:174px;height:62px;}
Note
You can use multiple pseudo-classes at the same time __hover__before.png
Note
pseudo-class separator use to be _
. Since glue 0.9
it is __
. If you don’t want / you can’e rename all your files, you can use --pseudo-class-separator=_
in order to make glue
work in legacy mode.
Available pseudo classes¶
Glue will only detect the following pseudo-classes: link
, visited
, active
, hover
, focus
, first-letter
, first-line
, first-child
, before
and after
.