The following will result in both the <h1> and <p> elements having hideous orange backgrounds rendered in Comic Sans. Time for me to go learn about proper web design!
<!-- HTML --> <h1>A Title</h1> <p>Exciting words!</p>
/* CSS */
*{
font-family:'Comic Sans MS';
background:#ff6600;
}
The following will result in <h1> elements renedering in Comic Sans with an orange background. Lovely!
<!-- HTML --> <h1>A Title</h1> <p>Exciting words!</p>
/* CSS */
h1{
font-family:Comic-sans;
font-size:30px;
background:#ff6600;
}
The following will result in the any <div> with a data-smell attribute to have a blue border. All other divs will have a red border.
<!-- HTML -->
<div data-smell="branky">
<p>What does this div smell like?</p>
</div>
<div>
<p>div the second</p>
</div>
/* CSS */
div{
border:1px solid red;
margin-bottom:5px;
}
div[data-smell]{
border:1px solid blue;
}
In the following, any <div> with a data-smell attribute will have a red border except for divs with a data-smell attribute that is equal to "musty". Those divs will have a blue border. Also, divs are actually odourless.
<!-- HTML -->
<div data-smell="branky">
<p>What does this div smell like?</p>
</div>
<div data-smell="musty">
<p>What does this div smell like?</p>
</div>
/* CSS */
div[data-smell]{
border:1px solid red;
margin-bottom:5px;
}
div[data-smell="musty"]{
border:1px solid blue;
}
In the following, both divs have a data-smell attribute of branky and as such are both covered by the first selector. The second <div> also has the data-small attribute of oak so it gets the green border specified in the second selector.
<!-- HTML -->
<div data-smell="fishy branky">
<p>What does this div smell like?</p>
</div>
<div data-smell="branky oak">
<p>What does this div smell like?</p>
</div>
/* CSS */
div[data-smell~="branky"]{
border:1px solid red;
margin-bottom:4px;
}
div[data-smell~="oak"]{
border:1px solid green;
}
In the following example all links are red except external links which are green because the href attribute starts with the string "http".
<!-- HTML -->
<p>Here's a link to <a href="http://google.com">Google</a></p>
<p>Here's an <a href="/home">internal link</a>.</p>
/* CSS */
a{
color:red;
}
a[href^="http"]{
color:green;
}
In the following example links to pdfs are red while links to png files are green. Heady stuff.
<!-- HTML -->
<p>Here's a link to a <a href="/document.pdf">PDF</a></p>
<p>Here's a link to an <a href="/image.png">image file</a></p>
/* CSS */
a[href$="pdf"]{
color:red;
}
a[href$="png"]{
color:green;
}
In the following, all link will be blue unless the link is to a specific domain. In this case, all link to twitter.com will be green.
<!-- HTML --> <a href="http://google.com">External Link</a> <a href="/pants">Internal Link</a> <a href="http://twitter.com/dumaurier">Link to Twitter Feed</a>
/* CSS */
a{
text-decoration:none;
padding:5px;
color:blue;
}
a[href*="twitter.com"]{
color:green;
}
Represents an element with the hreflang attribute, its value either being exactly "en" or beginning with "en" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 or its successor.
I'm not altering the text from W3C on this one because I can't think of another example.
<!-- HTML --> <a href="#" hreflang="en-US">A Link</a> <a href="#" hreflang="fr">A Link</a>
/* CSS */
a{color:#ff6600
}
a[hreflang|="en"]{
color:green;
}
In the following, the current page has it's matching <nav> item assigned the class "selected" which will appear red. All other <nav> items will appear green.
<!-- HTML --> <nav> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </nav>
/* CSS */
a{
color:green;
text-decoration:none;
}
a.selected{
color:red;
}
An ID-typed attribute of a document language allows authors to assign an identifier to one element instance in the document tree. An ID selector contains a "number sign" immediately followed by the ID value, which must be an CSS identifiers. An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.
<!-- HTML --> <div id="first"> </div> <div> </div> <div> </div>
/* CSS */
div{
display:block;
height:100px;
width:100px;
margin:10px;
background:#ff6600;
}
div#first{
background:green;
}
In the vast majority of cases, :root will be the <html> element. I'd love to see some good uses for the :root pseudo-class. This example will result in the background of the document displaying green. Hooray?
/* CSS */
:root{
background:green;
}
In the following the first, third and fifth list items will be red. The :nth-child(2n+1) selector is equivelant to :nth-child(odd).
<!-- HTML --> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
/* CSS */
li:nth-child(2n+1){
color:red;
}
In the following, regardless of element type the last three children of the <div> will use color:red.
<!-- HTML --> <div> <p>Some words</p> <p>Some words</p> <p>Some words</p> <a href="#">A link</a> <p>Some words</p> </div>
/* CSS */
div{
border:1px solid green;
margin:10px;
}
div :nth-last-child(-n+3){
color:red;
}
Because no element is specified directly before the :nth-of-type pseudo-class (i.e. p:nth-of-type(2){color:red}), the second instance of both the <a> and <p> elements will use color:red. To apply to a single element type, you must preceed the psuedo-class with the element.
<!-- HTML --> <div> <p>Some words</p> <p>Some words</p> <p>Some words</p> <a href="#">A link</a> <a href="#">A link</a> <p>Some words</p> </div>
/* CSS */
div{
border:1px solid green;
margin:10px;
}
div :nth-of-type(2){
color:red;
}
Similar to :nth-of-type but because the :nth-last-of-type pseudo-class is preceeded with the <p> element only the second from last paragraph will use color:red.
<!-- HTML --> <div> <p>Some words</p> <p>Some words</p> <p>Some words</p> <a href="#">A link</a> <a href="#">A link</a> <a href="#">A link</a> <p>Some words</p> </div>
/* CSS */
div{
border:1px solid green;
margin:10px;
}
div p:nth-last-of-type(2){
color:red;
}
This pseudo-class is the same as :nth-child(1). In the following example div p:first-child represents the first paragraph. If it were changed to a:first-child it wouldn't represent anything because the <a> element is not the first child of the <div> element.
<!-- HTML --> <div> <p>Some words</p> <p>Some words</p> <p>Some words</p> <a href="#">A link</a> <a href="#">A link</a> <a href="#">A link</a> <p>Some words</p> </div>
/* CSS */
div{
border:1px solid green;
margin:10px;
}
div p:first-child{
color:red;
}
Like :first-child except it applies to the last child of an element. In this case, color:red will be applied to the last <p> element that is the child of a <div> element.
<!-- HTML --> <div> <p>Some words</p> <p>Some words</p> <p>Some words</p> <p>Some words</p> </div>
/* CSS */
div{
border:1px solid green;
margin:10px;
}
div p:last-child{
color:red;
}
The pseudo-class :first-of-type is the same as :nth-of-type(1). In the following, the first cell in each row of the table will have and orange background with white text.
<!-- HTML --> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
/* CSS */
tr td:first-of-type{
background:#ff6600;
color:white;
}
The pseudo-class :last-of-type is the same as :nth-last-of-type(1). In the following, by using the :last-of-type pseudo-class the last <li> will have a border radius applied to the bottom corners.
<!-- HTML --> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>
/* CSS */
ul{
list-style:none;
}
li{
border:1px solid green;
width:100px;
padding:5px;
text-align:center;
}
ul li:last-of-type{
border-radius:0 0 10px 10px;
}
In the following the <div> with the single <p> element will use color:red as it is the only child element of the <div>. The :only-child psuedo-class is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity and less typing.
<!-- HTML --> <div> <p>Here are some words</p> </div> <div> <p>Here are some more words</p> <p>Yet more words</p> </div>
/* CSS */
div{
border:1px solid green;
padding:5px;
margin:5px;
}
p:only-child{
color:red;
}
Similar to :only-child except it applies to an element whose parent element has no other element children of the same type. In the following, the <p> element in the first <div> will be red as it is the only instance of that element in its parent element. The :only-of-type pseudo-class is the same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity.
<!-- HTML --> <div> <p>Here are some words</p> <a href="#">This is a link</a> </div> <div> <p>Here are some more words</p> <p>Yet more words</p> </div>
/* CSS */
div{
border:1px solid green;
padding:5px;
margin:5px;
}
p:only-of-type{
color:red;
}
In the following, all empty cells in the table will have an orange background. If you want, you can use generated content to populate the empty elements with text while still using the :empty pseudo-class.
<!-- HTML --> <table> <tr> <td>1</td> <td></td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td></td> <td>6</td> </tr> </table>
/* CSS */
tr td:empty{
background:#ff6600;
}
The :link pseudo-class applies to links that haven't been visited (in this case, links are coloured green), the :visited pseudo-class applies to links that have been visited (in this case, visited links are coloured red with no text-decoration), the :hover pseudo-class applies when a user is hovering their cursor over the link (in this case, on hover the link will appear purple) and the :active pseudo-class when the link is being activated by the user(in this case, during the button press on the link it will appear blue).
<!-- HTML --> <a href="http://google.com">This is a link</a>
/* CSS */
a:link{
color:green;
transition:all .3s ease-in-out;
}
a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:purple;
}
a:active{
color:blue
}
The :link pseudo-class applies to links that haven't been visited (in this case, links are coloured green), the :visited pseudo-class applies to links that have been visited (in this case, visited links are coloured red with no text-decoration), the :hover pseudo-class applies when a user is hovering their cursor over the link (in this case, on hover the link will appear purple) and the :active pseudo-class when the link is being activated by the user(in this case, during the button press on the link it will appear blue).
<!-- HTML --> <a href="http://google.com">This is a link</a>
/* CSS */
a:link{
color:green;
transition:all .3s ease-in-out;
}
a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:purple;
}
a:active{
color:blue
}
The :link pseudo-class applies to links that haven't been visited (in this case, links are coloured green), the :visited pseudo-class applies to links that have been visited (in this case, visited links are coloured red with no text-decoration), the :hover pseudo-class applies when a user is hovering their cursor over the link (in this case, on hover the link will appear purple) and the :active pseudo-class when the link is being activated by the user(in this case, during the button press on the link it will appear blue).
<!-- HTML --> <a href="http://google.com">This is a link</a>
/* CSS */
a:link{
color:green;
transition:all .3s ease-in-out;
}
a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:purple;
}
a:active{
color:blue
}
The :link pseudo-class applies to links that haven't been visited (in this case, links are coloured green), the :visited pseudo-class applies to links that have been visited (in this case, visited links are coloured red with no text-decoration), the :hover pseudo-class applies when a user is hovering their cursor over the link (in this case, on hover the link will appear purple) and the :active pseudo-class when the link is being activated by the user(in this case, during the button press on the link it will appear blue).
<!-- HTML --> <a href="http://google.com">This is a link</a>
/* CSS */
a:link{
color:green;
transition:all .3s ease-in-out;
}
a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:purple;
}
a:active{
color:blue
}
You can use the :focus pseudo-class to invoke a state change instead of using the :target pseudo-class with a fragment identifier by giving the element a tabindex. Use tabindex="-1" if you want the element removed from the tab order. In the following, when clicked the image's opacity will transition from .4 to 1.0 and the image's dimensions will double.
<!-- HTML -->
<img src="http://lorempixum.com/300/300" alt="" tabindex="-1" />
/* CSS */
img{
opacity:.4;
height:150px;
width:150px;
cursor:pointer;
transition:all 1s linear;
}
img:focus{
opacity:1;
height:300px;
width:300px;
outline:none;
}
A link with a fragment identifier can link to another element on the page (or to a specific element on another page).
<!-- HTML --> <p>There's some exciting content hiding on this page!</p> <a href=#content>Click for excitement</a> <p id="content">EXCITE!</p>
/* CSS */
#content{
width:100px;
background:black;
}
#content:target{
color:white;
}
The :lang() pseudo-class can be used to demarcate CSS styles that apply to a specific language. In the following it is used to specify that type of quotation marks used for French language text using the <q> element. The lang attribute specifies the base language of an element's attribute values and text content.
<!-- HTML --> <q lang="en">This is a quote in English</q> <br> <q lang="fr">C'est une citation en Français</q>
/* CSS */
q:lang(fr){
quotes:"«""»";
}
The :enabled and :disabled pseudo-classes can be used to style elements in their respective states. These pseudo-classes can be used in style form elements in either state. You can add a gentle sprinkling of JavaScript to add and remove the disabled attribute as necessary in your forms.
<!-- HTML --> <input type="text" placeholder="username"> <input type="text" placeholder="password"> <button disabled type="submit">SUBMIT</button>
/* CSS */
:disabled{
background:red;
color:white;
border:none;
}
:enabled{
background:green;
border:none;
}
The :enabled and :disabled pseudo-classes can be used to style elements in their respective states. These pseudo-classes can be used in style form elements in either state. You can add a gentle sprinkling of JavaScript to add and remove the disabled attribute as necessary in your forms.
<!-- HTML --> <input type="text" placeholder="username"> <input type="text" placeholder="password"> <button disabled type="submit">SUBMIT</button>
/* CSS */
:disabled{
background:red;
color:white;
border:none;
}
:enabled{
background:green;
border:none;
}
In the following, the :checked pseudo-class in used in conjunction with the adjacent sibling combinator to change the text in the <span> element when the checkbox is in the checked state.
<!-- HTML --> <input type="checkbox" name="waffle"> <span>WAFFLE</span> <input type="checkbox" name="waffle"> <span>SADNESS</span>
/* CSS */
input:checked + span{
color:green;
}
One of the uses of the negation pseudo-class is as an alternative to a grouping of comma-separated selectors (like .class, class-two, .class-three{color:red;). The negation pseudo-class also has a higher specificity than a comma-separated list of selectors. In the following, the first, second and fourth <div> will have a blue border. The negation pseudo-class does not work with combinators and pseudo-elements.
<!-- HTML --> <div class="one"> </div> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div>
/* CSS */
div{
height:100px;
width:100px;
margin:10px;
background:green;
}
div:not(.three){
border:2px solid blue;
}
The ::first-line pseudo-element describes the contents of the first formatted line of an element. The :: notation was introduced in CSS3 to differentiate between pseudo-classes and pseudo-elements. Browser support is different between the two notations. Internet Explorer does not support the new :: notation but has supported the :first-line notation since version 5.5.
<!-- HTML --> <p>For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say "I'm going to sleep." </p>
/* CSS */
p::first-line{
font-size:18px;
font-weight:bold;
}
The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. The :: notation was introduced in CSS3 to differentiate between pseudo-classes and pseudo-elements. Browser support is different between the two notations. Internet Explorer does not support the new :: notation but has supported the :first-letter notation since version 5.5.
<!-- HTML --> <p>For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say "I'm going to sleep." </p>
/* CSS */
p::first-letter{
font-size:32px;
font-weight:bold;
}
In the following, the ::before pseudo-element is used to display the href attribute when the user hover's over the <a> element. Internet Explorer does not support the ::before pseudo-element but does support the old :before syntax. Most other modern browsers support both the old : notation and the new notation.
<!-- HTML --> <p>This is a link to <a href="http://google.com">Google</a>.</p>
/* CSS */
a{
position:relative;
display:inline-block;
margin-top:30px;
text-decoration:none;
}
a:hover::before{
display:block;
position:absolute;
content: attr(href);
top:-30px;
left:30px;
background:green;
color:white;
padding:5px;
border-radius:3px;
}
The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1 [CSS21]. In the following, the ::after pseudo-element is used to display the value of the data-filetype attribute describing the file's extension.Internet Explorer does not support the ::after pseudo-element but does support the old :after syntax. Most other modern browsers support both the old : notation and the new notation.
<!-- HTML --> <p>To download an exciting file <a href=/files/excite.pdf data-filetype="PDF">click here!</a></p>
/* CSS */
a::after{
content:" (" attr(data-filetype) ")";
}
A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A. In the following, all <p> elements will appear orange as they are all descendants of the <div> element with the class "first".
<!-- HTML --> <div class="first"> <p>There are three sentences in this div.<p> <p>One of them is not true.</p> <p>There isn't a fourth sentence in this div.</p> <div class="second"> <p>This is the fourth sentence.</p> </div> </div>
/* CSS */
.first{
border:1px solid green;
}
.second{
border:1px solid red;
margin:2px;
}
.first p{
color:#ff6600;
}
A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors. In the following, all <p> elements that are a child of the <div> element with the class "first" will appear orange. The fourth sentence is not a child of the first <div> and as such will not appear orange.
<!-- HTML --> <div class="first"> <p>There are three sentences in this div.<p> <p>One of them is not true.</p> <p>There isn't a fourth sentence in this div.</p> <div class="second"> <p>This is the fourth sentence.</p> </div> </div>
/* CSS */
.first{
border:1px solid green;
}
.second{
border:1px solid red;
margin:2px;
}
.first > p{
color:#ff6600;
}
The adjacent sibling combinator is made of the "plus sign" character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one. In the following, the second and third sentences will be green as they both share the same parent element and have a <p> element that immediately precedes them. The first sentence does not have another <p> element that precedes it and the fourth sentence has no direct siblings.
<!-- HTML --> <div class="first"> <p>There are three sentences in this div.<p> <p>One of them is not true.</p> <p>There isn't a fourth sentence in this div.</p> <div class="second"> <p>This is the fourth sentence.</p> </div> </div>
/* CSS */
p + p{
color:green;
}
The general sibling combinator is made of the "tilde" character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. In the following, all but the first sentence will be green as they are all <p> elements that have another <p> element that precede them within the same parent element.
<!-- HTML --> <div class="first"> <p>There are three sentences in this div.<p> <p>One of them is not true.</p> <p>There isn't a fourth sentence in this div.</p> <h2>A Heading</h2> <p>This is the fourth sentence.</p> </div>
/* CSS */
.first p ~ p{
color:green;
}