.
do not copy code using translator

*
xtgem
Twitter blog Facebook
TUTORIAL
PSEUDO CLASSEScss pseudo classes
Mobile browsers may not use all the options
you must first create a normal class i.e myclass . Then you create another class with the same name + the pseudo class. When adding the class to the element select the normal class NOT the pseudo class
activeThis class controls how a element looks when clicked
click me
.act { background-color: red; }.act:active { background-color: yellow; font-size: 150%; }hoverThis class controls how a element looks when the cursor or mouse passes over it
hover over me
.hov { background-color: red; }.hov:hover { background-color: fuchsia; font-weight: bold; }unvisitedThis class controls how unvisited links look
click me
.unv { background-color: yellow; }.unv:link { background-color: aqua; }visitedThis controls how a visited link looks
click me
.vis { background-color: yellow; }.vis:visited { background-color: green; }focusFocus is similar in effect to "active" but is used for text input elements
.inp { background-color: yellow; }.inp:focus { background-color: lime; }
PSEUDO ELEMENTSThe pseudo elements only work on "block" level elements like <div> and <p> the XtGem text block cannot use them
First_letter & First linefirst letter
This adds a style to the first letter of a element
This is First letter of the text
.firstlett { background-color: yellow;}.firstlett:first-letter { background-color: red; font-size: 200%; border-width: 1px; border-style: solid; border-color: black; }
first line
This adds a style to the first line of a element
This is First line of the text
this is the second line
.firstline { background-color: yellow;}.firstline:first-line { color: green; }Before & After
Before and after

BACK

Main Page
©2010 - 2024 Graham.yn.lt
X T B O A R D
X T G E M
© MMXXIV Graham