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;

}

Leave a Reply

Your email address will not be published.