Pseudo-classes
Pseudo class selectors are CSS selectors with a colon preceding them. Example: a:
hover
{ /* Hover is a pseudo class */ } A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus selector:pseudo-class { property:value; } link, targeting unvisited links, and visited, targeting visited links, are the most basic pseudo classes.
Anchor Pseudo-classes:
Links can be displayed in different ways: a:link { color: #FF0000; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; } a:active { color: #0000FF; }
Pseudo-classes can be combined with CSS classes:
a.highlight:hover { color: #ff0000; } div:hover { background-color: blue; } In the following example, the selector matches the first i element in all p elements: Example p i:first-child { color: blue; <body> <p>This is body’s first paragraph child.</p> <p>Second paragraph.</p> ... …if you only want to style the first paragraph, you could use the following CSS: p:first-child { font-weight: bold; font-size: 40px; }