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