CSS2 Selectors (cascading style sheet)
While CSS2 had ‘simple selectors’, the refashion calls them the elements as ‘a’ sequence
*
All Elements
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with red text color.
p {
text-align: center;
color: red;
}
div <div>
The <div> tag defines a division or a section in an Html document.
Example
A <div> section in a document that is styled with css:
<html>
<head>
<style>
.myDiv {
border:5px outset red;
background-color: lightblue;
text-align:center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2> This is a heading in a div element </h2>
<p> This is some text in a div element.</p>
</div>
</body>
</html>
div span
<span> within <div>
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements – which is then styled with CSS or manipulated with javascript.
Example
<html>
<head>
<style>
.myDiv{
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2> Tjhis is a heading in a div element </h2>
<p> This is some text in a div element </p>
</div>
</body>
</html>
The <span> tag is an inline container used to mark up a part of a text,or part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
Example
A <span> element which is used to color a part of a text.
<p>My mother has <span style="color:blue">blue</span>eyes.</p>
div, span
<div>and<span>
The Syntax of the tags is as follows:
<div>Block,content, other tags, etc. </div> <div>Content <span> of the block </span> with inline elements </div>
Example
<!DOCTYPE HTML> <html> <head> <title>HTML 5 Practical Exrcises </title> <meta charset="utf-8"> </head> <body> <p>Block and line elements </p> <div style="color:#0000FF"> <h3>Header type 3 </h3> <p>paragraph with applied format</p> </div> <div> <p>Paragraph with format<span style="color:blue">applied</span>to an element inline </p> </div> </body> </html>
div span
<span>with parent <div>
The parent Element property returns the parent element of the specified element.
Example
Click on an element (<span>) to hide its parent element (<div>):
<div> <span onclick="this.parent Element.style.display= 'none';">x</span> </div>
div + span
<span> preceded by <div>
span vs. div Examples
Let’s now look at a couple examples of span and div that demonstrate their differences and applications.
#div-0 { background-color: #7fd1de; }
#div-1 { background-color: #b4bbe8; }
# span-0 { background-color: #ffbcac;
}
# span-1 { background-color: #7fded2;
}
.class
Elements of class “class”
Example
Select and style all elements with class =”intro”:
.intro {
background-color: yellow;
}
div.class
<div> of class “class”
Example
A <div> section in a document that is styled with CSS:
<html>
<head>
<style>
.myDiv {
border: 5px outset blue;
background-color:red;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2> This is a heading in a div element </h2>
<p> This is some text in a div element.</p>
</div>
</body>
</html>
Example
Style all <p> elements with class=”hometown”:
p.hometown {
background-color: yellow;
}
#itemid
Element with id “itemid”
Example HTML:
<div itemid="MenuContainer" id="MenuContainer" class="MenuCountainer">
Example CSS
#MenuContainer {
/* styles * /
}
div#itemid
<div> with id “itemd”
Example
div {
display: block;
}
Example CSS:
#MenuContainer {
/* Styles * /
}
a[attr]
<a> with attribute “attr”
CSS [attribute] Selector
The [attribute] selector is used to select elements wiht a specified attibute.
The following example selectors all <a> elements with a target attribute:
Example
a[target] {
background-color: yellow;
}
Attr()
The attr ( ) CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-elements originating element is retured.
Example
/* Simple usage*/ attr(data-count); attr(title); /*with type */ att(src url); attr(data-count number); attr(data-width px); /*with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default");
a[attr=’x’]
<a> when “attr” is “x”
So would like to use pre tags in a documentation web page. Now, I want the correct language to be in the top right corner. So This is what |thought|could do:
<pre class="code" language="Codeone"></pre>
then |could use after and attr(x) in css to fill the psuedo with the content of language:
pre.code.after{
content:attr("language");
position:absolute;
right:0;
top:0;
}
But this is not doing anything!
if change attr("language") to "codeone" it works...why does attr(x)not work here?
CSS [attribute~=value] Selector
Example
Select and style elements with a title attribute containing the word “flower”:
[title~=flower] {
background-color: yellow;
}
CSS: lang Selector
Example
Select and style every <p> element with a lang attribute value equal to “it” (Italian):
p: lang(it) {
background: yellow;
}
