HTML and CSS Reference
In-Depth Information
For example, lets imagine you have a long page with lots of text and
h2
headings, and there is an index of those headings at the top of the page. It
will be much easier for the user if, when clicking on a particular link within
the index, that heading would become highlighted in some way, when the
page scrolls down. Easy:
h2:target {
background: #F2EBD6;
}
Notes on browser support
This time, Internet Explorer is really annoying and has no support at all for
the
:target
pseudo-class. Another glitch is that Opera doesn't support this
selector when using the back and forward buttons. Other than that, it has
support from the other major browsers.
THE UI ELEMENT STATES PSEUDO-CLASSES
Some HTML elements have an enable or disabled state (for example, input
fields) and checked or unchecked states (radio buttons and checkboxes).
These states can be targeted by the
:enabled
,
:disabled
or
:checked
pseudo-classes, respectively.
So you can say that any
input
that is disabled should have a light grey
background and dotted border:
input:disabled {
border:1px dotted #999;
background:#F2F2F2;
}
You can also say that all checkboxes that are checked should have a left
margin (to be easily seen within a long list of checkboxes):
