HTML and CSS Reference
In-Depth Information
:enabled and :disabled
The :enabled and :disabled pseudo-classes allow you to style controls based on their enabled
or disabled state. By default, disabled controls typically are light gray. With these pseudo
classes, you can control how the element displays in either state. The following code
demonstrates this:
input:disabled {
background-color: blue;
}
input:enabled {
background-color: white;
}
If a control is enabled, the background will be white; otherwise disabled controls will be
blue.
:irst-child
The :irst-child pseudo-element applies the specified styles to the first instance of the element
that occurs in a list, for example, the first paragraph element in this HTML:
<div>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
<p>Lorem Ipsum ...</p>
</div>
The following CSS will change the text color to green in the first paragraph element:
p:first-child {
color:green;
}
:irst-letter
The :irst-letter pseudo-element will alter the style of the first letter in the specified element.
Continuing with the example HTML above, the following CSS will increase the size of the first
letter in each paragraph element:
p::first-letter {
font-size: xx-large;
}
 
Search WWH ::




Custom Search