CSS Selectors

CSS selectors allow you to control the styling on certain things when they're fired. In this tutorial, we'll learn how to use them properly.

:focus:
:focus is a selector used to indicate that the element is in the focus of the browser (ex. when tabbed on).

Code:

textarea:focus {
background:red;
}

:hover:
:hover is used to style things when they are hovered on. If I want my button to change color on hover, I could do:

Code:

button {
background:blue;
}
button:hover {
background:red;
}

I can't tab in the editor, sorry.

:visited:
:visited can be used to change the color of anchor links when they have been previously visited.

Code:

a:visited {
text-decoration:none;
}

:link:
:link can be used with the a tag to style sites not previously visited by the user.

Code:

a:link {
color:red;
}

:disabled:
:disabled will apply styling to every disabled input. Generally, you'd use this in combination with input like so:

Code:

input:disabled {
background:black;
}

::selection:
::selection can be used to change the color on text when it's selected. Generally, the pseudo selector is applied to nothing, so that the whole page has a different highlight.

Code:

::selection {
background: gray;
}

There are a few more I'm not including, but this is a brief overview. :)