Friendly CSS3 Course #Part 3- Working with event selectors and state selectors

Deprecated: Function create_function() is deprecated in /home/vhosts/ on line 4698


Using event selectors

Event selectors choose objects based on a particular event, such as a mouse over.

  •         When the user hovers the mouse pointer over an object, the object’s formatting changes
  •         When the user moves the mouse pointer off of the object, the formatting returns to normal

Selects an object when the mouse pointer is hovered over it.
show that an item is selected or to display details about an object
Selects an object when the object has the keyboard focus
used with forms to show which field is selected

Using our previous example files , lets add the CSS styles and see the output.

/* Event selectors */

p:hover , h1: hover

{ text-decoration:none;

font-family: "Arial", sans-serif;

font-size: xx-large;

color: BlueViolet;

background-color: Plum;





When you hover p o h1 they will change to the event selected style.


Working with state selectors

Example: When the user clicks that link, the state of the link changes to “visited.”

Using state selectors

State selectors can change the appearance of the document to match activities that the user has performed.When the user clicks a link, the state of the link changes to “visited.”
Styles all of the unvisited links in a page
where the formatting would affect all of the unvisited anchor links
where the formatting would affect all of the unvisited image links
all of the visited links
the link that the user currently has selected
an object that has no content
changes  the  target of that is currently selected.
content that the user has highlighted in some way

Write this HTML and CSS based on previous examples.

<!DOCTYPE html>



<title> A testing page </title>

<link rel ="stylesheet" href="test6.css" />



<h1>Our heading </h1>

<p>Simple text to go with the heading </p>

<a href="#one"> Select One </a> <br />

<a href="#two"> Select Two </a> <br />

<a href="#three"> Select Three</a>

<p id="one">One</p>

<p id="two">Two</p>

<p id="three">Three</p>




/* State selectors */




background-color: Green;


::-moz selection


color: Black;

background-color: Green;




border: solid;

border-width: medium;

border-color: Red;

background-color: #00abff;



When you click on a link , then changes the target below.

Also , when you select something , CSS changes its color.


Finally a summary in a mindmap


Download PDF Mindmap


Previous Chapter


Next Chapter

You may also like...