Seven Simple Selector Exercises
As we have seen, you select items using CSS selectors and then DO somthing to them. Inside the DIV with id "special-container" below are 200 SPAN tags, each with one of 7 class tags for each color of the rainbow. They are generated at random. Let's do a few simple exercises to get started.
- Next, select all of the spans with class of "red" and make the css "font-weight" property "bold"
- Make every other yellow tag have a 1 pixel border (set "border" to "1px solid black")
- Alan Greenspan is Exciting!!! So let's add (or, "append") 3 exclamation points to the end of each green span!!!
- Let's use some Spanish too. For spans of class blue, remove the blue class and add an azul class. You can do this in one line by chaining the functions together. use addClass and removeClass
- I always liked Skittles but not the purple ones. So purple has got to go. Let's give it a classy exit and fade it out over using fadeOut over 1 second (1000 miliseconds)