HTML
<div class="head"></div>
<div class="bar side bar"></div>
<div class="left navtool"></div>
<div class="footer bar">At the end let us think of any attr value as a string.that string is made of one string value (like attr="value") or space seprated number of values (like attr=" more and more values").we will be picking markup elements using attr selectors like so: <code>element[attr] </code> will select according to attr name, <code>element[attr="value"] </code>selects the exact value, <code>element[attr~="value"] </code>will select if <code>value </code> exists in a space seprated number of values.the selectors <code>[attr^="value"] </code> and <code>[attr$="value"] </code> will select if attr string is prefixed ^= with "value" and suffixed $ with "value".finally <code>[attr*="value"] </code> will select if "value" matches wether "value" was seprated or part of a one string.<code>[attr <code>operator i</code></code> denotes that<code>attr</code> value is case insensetive and something like <code>"VALUE","value" or "VAlue"</code> are similar.</div>
<div lang="en-us" class="page center"></div>
CSS
html{height:100%;
position:relative;
}
div[class="head"]{
width:100%;
height:2em;
background:rgba(10,100,250,0.3);
}
div[class~="side"]{
float:left;
width:2em;
height:300px;
background:linear-gradient(to bottom,rgba(10,100,250,0.3) 30%,black 120%);
}
div[class*="left navtool"]{
width:2em;
height:300px;
background:linear-gradient(to bottom,rgba(10,100,250,0.3) 30%,black 120%);
float:right;
}
div[class^="footer"]{
width:100%;
height:auto;
padding:7px 0px;
color:black;
background:linear-gradient(to bottom,rgba(10,100,250,0.3) 30%,black 120%);
position:absolute;
bottom:0;
}
div[class$="center"]{
width:5%;
height:3em;
border-radius:50%;
background:linear-gradient(to bottom,rgba(10,100,250,0.3) 30%,black 120%);
display:table;
position:absolute;
top:50%;
left:50%;
margin-left:-2.5%;
margin-top:-1.5em;
}
div[lang|="en"]
{
outline:2px dashed red;
}
