Some SpotLight in CSS. CSS element>element Selector div>p.

Some SpotLight in CSS

CSS element>element Selector

div>p

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">div>p{background-color:yellow;}</style>

</head>

<body><div class="intro"><p>I live in Duckburg</p></div><p>My best friend is Mickey</p></body></html>

• The element>element selector is supported in all major browsers.

• Note: For element>element to work in IE, a <!DOCTYPE> must be declared

http://www.w3schools.com/tags/tag_doctype.asp

CSS element+element Selector

How to style all <p> elements that are placed immediately after a <div> element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">.intro{

background-color:black;color:#FFF;

}div+p{background-color:yellow;}</style></head>

<body><h1>Welcome to My Homepage</h1><div class="intro"><h2 id="firstname">My name is Donald</h2><p id="hometown">I live in Duckburg</p></div><p>My best friend is Mickey</p><p>I am a duck</p></body></html>

• The element+element selector is supported in all major browsers.

• Note: For element+element to work in IE, a <!DOCTYPE> must be declared.


CSS * Selector

How to select all elements, and set their background color

<html><head><style type="text/css">*{background-color:yellow;}</style></head>

<body><h1>Welcome to My Homepage</h1><div class="intro"><h2 id="firstname">TA Group</h2><p id="hometown">I live in Iran</p></div><p>Persian TA</p></body></html>

• The * selector styles all elements.• The * selector can also style all elements

inside other elements:

<html><head><style type="text/css">div *{background-color:yellow;}.intro{

text-align:right;

}</style></head>

<body><h1>TA </h1><div class="intro"><h2 id="firstname">Persian TA</h2><p id="hometown">I live in Tehran</p></div><p>Tehran</p></body></html>

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").

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">[title~=flower]{border:5px solid yellow;}</style></head>

<body><p>The image with a title attribute containing the value "flower" gets a yellow border.</p>

<img src="klematis.jpg" title="plant flower klematis" width="150" height="113"><img src="img_flwr.gif" title="flowers" width="224" height="162"><img src="landscape.jpg" title="landscape" width="160" height="120">

<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE, a DOCTYPE must be declared.</p></body></html>

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".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">[lang|=en]{background:yellow;}

[test|=ss]{

background:#999;}

</style></head>

<body><p lang="en">Hello!</p><p lang="en-us">Hi!</p><p lang="en-gb">Ello!</p><p lang="us">Hi!</p><p lang="no">Hei!</p>

<p>.......</p><p test="ss">....BABBAk...</p><p test="sss">....BABBAk...</p><p test="ss-mm">....BABBAk...</p>

</body></html>

CSS element element Selector

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

<html><head><style type="text/css">div p{background-color:yellow;}</style></head>

<body><h1>Title</h1><div class="intro"><h2 id="firstname">Test 1</h2><p id="hometown">test 2</p></div><p>test 3</p></body></html>

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

<html><head><style type="text/css">div,p{background-color:yellow;}</style></head>

<body><h1>Welcome to My Homepage</h1><div class="intro"><h2 id="firstname">Test 1</h2><p id="hometown">Test 2</p></div><p>Test 3</p></body></html>

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 <!DOCTYPE> must be declared.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:lang(it){ background:yellow;}

div:lang(iran){ background:yellow;}</style>

</head>

<body><p>test1</p><p lang="it">test2</p><div>test 3</div><div lang="iran"> test 4 </div><div></div>

<b>Note:</b> For :lang to work in IE, a DOCTYPE must be declared.

</body></html>

CSS :after Selector

• The :after selector inserts content after the selected element(s).

• Use the CSS content property to specify the content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:after{ content:"- Babak Tavatav";}</style></head>

<body><p>Web Design</p><p>HTML5</p>

<b>Note:</b> For :before to work in IE, a DOCTYPE must be declared.

</body></html>

CSS :before Selector

• The :before selector inserts content in front of the selected element(s).

• Use the CSS content property to specify the content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:before{content:"Read this::-";}</style></head>

<body><p>ASP.net</p><p>HTML5</p>

<b>Note:</b> For :before to work in IE, a DOCTYPE must be declared.

</body></html>

CSS :first-child pseudo-element

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:first-child{background-color:yellow;}</style></head>

<body><h1>Welcome to My Homepage</h1><p>This paragraph is not the first child of its parent.</p><div class="intro"><p>1.</p><p>2.</p><p>3.</p></div><p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p></body></html>

CSS :first-letter pseudo-element

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

<html><head><style type="text/css">p:first-letter{background-color:yellow;}</style></head>

<body><h1>Welcome </h1><div class="intro"><h2 id="firstname">Babak Tavatav</h2><p id="hometown">Web design </p></div><p>HTMl & CSS</p></body></html>

CSS :first-line pseudo-element

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

<html><head><style type="text/css">p:first-line{background-color:yellow;}</style></head>

<body><h1>WWF's Mission Statement</h1><p>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 </p></body></html>

CSS :focus Selector

The :focus selector styles the element that has focus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">input:focus{background-color:yellow;}</style></head>

<body><p>Click inside the text fields to see a yellow background:</p><form>First name: <input type="text" name="firstname" /><br /><br />Last name: <input type="text" name="lastname" /></form>

</body></html>

CSS :hover Selector

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

<html><head><style type="text/css">a:hover{background-color:yellow;}</style></head>

<body><p>Mouse over the links to see a yellow background:</p><a href="http://www.Avandweb.ir">Avand</a><a href="http://www.SabadeKala.com">SabadeKala</a></body></html>

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!

<html><head><style type="text/css">a:visited{background-color:yellow;}</style></head>

<body><a href="http://www.sabadekala.com">SabadeKala</a><a href="http://www.AvandWeb.ir">Avand</a><a href="http://www.WROX.com">WROX</a>

<p><b>Note:</b> The :link selector does not style links to pages you have already visited.</p></body></html>

The End

Some SpotLight in CSS. CSS element>element Selector div>p.

Documents

Transcript of Some SpotLight in CSS. CSS element>element Selector div>p.