Some SpotLight in CSS

CSS element>element Selector div>p

div>p { background-color:yellow; } I live in Duckburg My best friend is Mickey

The element>element selector is supported in all major browsers. Note: For element>element to work in IE, a must be declared

CSS element+element Selector How to style all elements that are placed immediately after a element.

.intro { background-color:black; color:#FFF; } div+p { background-color:yellow; } Welcome to My Homepage My name is Donald I live in Duckburg My best friend is Mickey I am a duck

The element+element selector is supported in all major browsers. Note: For element+element to work in IE, a must be declared.

CSS * Selector How to select all elements, and set their background color

* { background-color:yellow; } Welcome to My Homepage TA Group I live in Iran Persian TA

The * selector styles all elements. The * selector can also style all elements inside other elements:

div * { background-color:yellow; }.intro { text-align:right; } TA Persian TA I live in Tehran Tehran

CSS [attribute~=value] Selector The [attribute~=value] selector styles elements with the specified attribute containing the specified value. Note: The value has to be a whole word, either alone (title="flower") or separated by white- space (title="plant flower klematis").

[title~=flower] { border:5px solid yellow; } The image with a title attribute containing the value "flower" gets a yellow border. Note: For [ attribute ~= value ] to work in IE, a DOCTYPE must be declared.

CSS [attribute|=value] Selector The [attribute|=value] selector styles elements with the specified attribute starting with the specified value. Note: The value has to be a whole word, either alone, like lang="en", or followed by a hyphen( - ), like lang="en-us".

[lang|=en] { background:yellow; } [test|=ss] { background:#999; } Hello! Hi! Ello! Hi! Hei! BABBAk...

CSS element element Selector Separate selectors with a white-space, to style elements inside elements. The element element selector styles elements inside elements.

div p { background-color:yellow; } Title Test 1 test 2 test 3

CSS element,element Selector Separate selectors, using commas, to style more than one element with the same style. The element,element selector styles all elements with either one of the specified tagnames

div,p { background-color:yellow; } Welcome to My Homepage Test 1 Test 2 Test 3

CSS :lang Selector The :lang() selector styles all elements with the lang attribute set to a specified value. The :lang() selector is supported in all major browsers. Note: For :lang() to work in IE, a must be declared.

p:lang(it) { background:yellow; } div:lang(iran) { background:yellow; } test1 test2 test 3 test 4 Note: For :lang to work in IE, a DOCTYPE must be declared.

CSS :after Selector The :after selector inserts content after the selected element(s). Use the CSS content property to specify the content.

p:after { content:"- Babak Tavatav"; } Web Design HTML5 Note: For :before to work in IE, a DOCTYPE must be declared.

CSS :before Selector The :before selector inserts content in front of the selected element(s). Use the CSS content property to specify the content.

p:before { content:"Read this::-"; } ASP.net HTML5 Note: For :before to work in IE, a DOCTYPE must be declared.

CSS :first-child pseudo-element first-child pseudo-element styles the specified selector, only if it is the first child of its parent.

p:first-child { background-color:yellow; } Welcome to My Homepage This paragraph is not the first child of its parent Note: For :first-child to work in IE, a DOCTYPE must be declared.

CSS :first-letter pseudo-element first-letter pseudo-element adds a style to the first letter of the specified selector.

p:first-letter { background-color:yellow; } Welcome Babak Tavatav Web design HTMl & CSS

CSS :first-line pseudo-element The :first-line pseudo-element adds a style to the first line of the specified selector.

p:first-line { background-color:yellow; } WWF's Mission Statement this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test

CSS :focus Selector The :focus selector styles the element that has focus.

input:focus { background-color:yellow; } Click inside the text fields to see a yellow background: First name: Last name:

CSS :hover Selector The :hover selector styles elements when you hover (mouse over) them.

a:hover { background-color:yellow; } Mouse over the links to see a yellow background: Avand SabadeKala

CSS :visited Selector The :visited selector styles links to visited pages. Note: The :link selector does not style links to pages you have not visit. Tip: Use the :link selector to style links to not visited pages. Tip: Use the :hover selector to style links when you mouse over them. Note: :hover MUST come after :link and :visited (if they are specified) in the CSS definition in order to be effective! Tip: Use the :active selector to style links when you click on them. Note: :active MUST come after :hover (if specified) in the CSS definition in order to be effective!

a:visited { background-color:yellow; } SabadeKala Avand WROX Note: The :link selector does not style links to pages you have already visited.

The End