/* the style will be applied to all elements using intro for class attribute*/
.intro
{
background-color:yellow;
}
/* the style will be applied to the element with id attribute set to firstname*/
#firstname
{
background-color:yellow;
}
/* the style will be applied to all elements*/
*
{
background-color:yellow;
}
/* the style will be applied to all p elements*/
p
{
background-color:yellow;
}
/* the style will be applied to all h1 and p elements*/
h1,p
{
background-color:yellow;
}
/* the style will be applied to p elements that are children of div elements*/
div p
{
background-color:yellow;
}
/* the style will be applied to the p elements that are placed at the same level of a div element. p elements immediately after div elements for example*/
div+p
{
background-color:yellow;
}
/* the style will be applied to anchor elements with target attributes*/
a[target]
{
background-color:yellow;
}
/* the style will be applied to all anchor elements with _blank as the target*/
a[target=_blank]
{
background-color:yellow;
}
/* the style will be applied to all elements with title attribute has the word flower*/
[title~=flower]
{
background-color:yellow;
}
/* the style will be applied to all elements where language attribute starts with en*/
[lang|=en]
{
background-color:yellow;
}
/* the style will be applied to all unvisited links*/
a:link
{
background-color:yellow;
}
/* the style will be applied to all visited links*/
a:visited
{
background-color:yellow;
}
/* the style will be applied to all active links*/
a:active
{
background-color:yellow;
}
/* the style will be applied on anchor links when mouse over on it */
a:hover
{
background-color:yellow;
}
/* the style will be applied to input elements with focus*/
input:focus
{
background-color:yellow;
}
/* the style will be applied to the first letter of all paragraphs*/
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
/* the style will be applied to the first line of each p element*/
p:first-line
{
background-color:yellow;
}
/* the style will be applied to the first child of each p element*/
p:first-child
{
background-color:yellow;
}
/* the style will be applied to all p elements. the text will be added before each p element*/
p:before
{
content:”Add this word before each p element: “;
}
/* the style will be applied to all p elements. the text will be added after each p element*/
p:after
{
content:”- after p element “;
}
/* the style will be applied to all p elements with language attribute where lang attribute starts with it*/
p:lang(it)
{
background:yellow;
}
/* the style will be applied to all ul elements preceeded by p elements*/
p~ul
{
background:#ff0000;
}
/* the style will be applied to div elements with class attribute starts with the word test*/
div[class^=”test”]
{
background:#ffff00;
}
/* the style will be applied to all div elements whose class attribute ends with test*/
div[class$=”test”]
{
background:#ffff00;
}
/* the style will be applied to all div elements where the class attribute contains the term test anywhere*/
div[class*=”test”]
{
background:#ffff00;
}
/* the style will be applied to the document root*/
:root
{
background:#ff0000;
}
/* the style will be applied to all empty p elements with no child and no text element*/
p:empty
{
background:#ff0000;
}
/* add this image before the current active link */
:target:before
{
content: url(/images/lamp.gif);
}
/* the style will be applied to all enabled input text element*/
input[type=”text”]:enabled
{
background:#ffff00;
}
/* the style will be applied to all disabled input text element*/
input[type=”text”]:disabled
{
background:#dddddd;
}
/* the style will be applied to all checked input elements*/
input:checked
{
background:#ff0000;
}
/* the style will be applied to all elements other than p*/
:not(p)
{
background:#ff0000;
}
/* the style will be applied to the selected text*/
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
p:first-of-type
{
background:#ff0000;
}
p:last-of-type
{
background:#ff0000;
}
p:only-of-type
{
background:#ff0000;
}
p:only-child
{
background:#ff0000;
}
p:nth-child(2)
{
background:#ff0000;
}
p:nth-last-child(2)
{
background:#ff0000;
}
p:nth-of-type(2)
{
background:#ff0000;
}
p:nth-last-of-type(2)
{
background:#ff0000;
}
p:last-child
{
background:#ff0000;
} From: http://sitestree.com/?p=113
Categories:Web Development, CSS, Root, By Sayed Ahmed
Tags:Css selector, Css
Post Data:2012-11-30 04:10:30
