some spotlight in css. css element>element selector div>p
TRANSCRIPT
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
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