<ul> <li id="myID" class="myClass">item 1</li> <li class="myClass">item 2</li> <li>item 3</li> </ul>
img[alt] {}
<img src="image.jpg" alt="accessible">
<img src="image.jpg" title="inaccessible">
form [type] {}
<input type=date>
<select>
IE6 sucks
IE7 support basic non-empty attribute
p[lang|="en"]{/* <p lang="en-us"> <p lang="en-uk"> */ }
a[title~=more] {/* <a title="want more info about this?">}
a[href^=mailto] {background-image: url(emailicon.gif);}
a[href^=http]:after {content: " (" attr(href) ")";}
a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}
Note: Multiple attributes work! a[title][href]
input[placeholder] {
/* matches any input with a placeholder */}
input[type=email] {
/* exact match */}
abbr[title~=unicorn] {
/* matches unicorn but not unicorns */}
abbr[title|=en] {
/* matches en-us and en-uk */}
a[href^=mailto] {
/* starts with */}
a[href$=pdf]{
/* ends in */}
abbr[title*=unicorn] {
/* matches unicorn and unicorns */}
E:[att]
/* have the attribute at all */ E:[att=val]
/* exact */ E:[att~=val]
/* val is a space separated word */ E:[att|=val]
/* with a dash */ E:[att^=val]
/* begins with val */ E:[att$=val]
/* ends with val */ E:[att*=val]
/* val is anywhere as a substring */ .
@media print{
abbr[title]:after {
content: "(" attr(title) ")";
}
a[href^=http]:after {
content: "(" attr(href) ")";
}
}
Note: The top line of the example is editable. The CSS will impact the contents on the rest of the page.
Based on current state of UI
:enabled :disabled :checked
Example:
input[type=checkbox]:checked + label {
color: red;
}
:valid :invalid :required :optional :in-range :out-of-range :read-only :read-write :default
Example:
input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}
Test them out for yourselves
:nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-child* :last-child :first-of-type :last-of-type :only-child :only-of-type :root :empty :not(:empty)
:first-child :last-child :first-of-type :last-of-type :only-child :only-of-type
Easier to explain by example
:nth-child(3n) :nth-last-child(odd) :nth-of-type(5) :nth-last-of-type(3n+1)
Target element or elements based on argument passed to the selector
tr:first-child,
tr:last-child {
font-weight: bold;
}
tr:first-of-type,
tr:last-of-type{
text-decoration:line-through;
}
tr:nth-child(even) {
background-color: #CCC;
}
tr:nth-child(3) {
color: #CCC;
}
tr:nth-of-type(odd) {
background-color: #FFF;
}
tr:nth-of-type(4n) {
color: #C61800;
}
tr:nth-of-type(3n-1) {
font-style: italic;
}
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
| Row 5 |
| Row 6 |
| Row 7 |
| Row 8 |
| Row 9 |
| Row 10 |
li:first-of-type:last-of-type{width: 100%;}
li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1){width: 50%;}
li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(3):nth-last-of-type(1),
li:nth-of-type(2):nth-last-of-type(2){width: 33.33%;}
li:nth-of-type(1):nth-last-of-type(4),
li:nth-of-type(2):nth-last-of-type(3),
li:nth-of-type(3):nth-last-of-type(2),
li:nth-of-type(4):nth-last-of-type(1){width: 25%;}
Let's Play Note: Play with negative values for 'a'
div:not(.excludeMe)
p:empty {
/* styles here */
}
Matches:
<p></p> <p><!-- this is a comment --></p>
:lang :target
link & user action pseudo-classes
:link :visited :hover :active :focus
:target example
:root
Selects the document root, which is <html>
::first-line
::first-letter
::selection (not in specification)
::before
::after
Pseudo-classes select elements that
already exist.
Pseudo-elements create "faux" elements you can style.
Use single colon because of IE
You can even pretty drop-caps with :first-letter, but make sure to apply it to p:first-of-type so your site not too ugly. Code for drop cap.
p:first-of-type::first-letter {
position: relative;
top: 8px;
float: left;
font-size: 3em;
line-height: 1;
color: #C7573A;
padding: 0 4px 2px 0;
font-weight: bold;
}
.thisSlide *::selection {
background-color: #C61800;
color: #ffffff;
}
Prefix with -moz- for Firefox
Use single colon because of IE