Upload
b-anjaneyulu-reddy
View
461
Download
1
Tags:
Embed Size (px)
DESCRIPTION
In this presentation we will see the basics of CSS, few selectors from a developers perspective.
Citation preview
CSS for Developers
Anjaneyulu Reddy BEERAVALLIEmail: [email protected]
Twitter: @_anjiKNOLSKAPE Solutions Pvt Ltd
CSS is a query language
.a {font-size: 12px;
}
SELECT aFROM domWHERE classname = 'a'
Properties
Selectors - The 23
** {
margin: 0;padding: 0;
}
#container * {border: 1px solid black;
}
x
x - tagname
x {background-color: blue;
}
#x#container {
border: 1px solid black;}
.x
.error {color: red;
}
x y
Select all `y` which are descendants of `x`
li a {text-decoration: none;
}
a:visited a:link
":<param>" - pseudo class elements
a:visited {color: red;
}
a:link {color: purple;
}
x + y
select first `y` adjacent to `x`
ul + p {color: red;
}
x > yselect all `y` which are direct children to `x`
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
x ~ y
select all `y` adjacent to `x`
ul ~ p {color: red;
}
x[attr]
attribute selector: select all x which have attribute `title`
a[title] { color: green;}
x[attr="z"]
attribute selector: select all x which have attribute `attr` whose value is equal = z
a[href="www.google.com"] { color: green;}
// multiple attributesa[href="www.google.com"][title="google"] {
color: green;}
a[href*="tuts"]
attribute selector: select all anchor tags which have attribute `href` whose value contains the word `tuts`
a[href*="tuts"] { color: green;}
a[href^="http"]
attribute selector: select all anchor tags which have attribute `href` whose value start with the word `http`
a[href^="http"] { color: green;}
a[href$=".jpg"]
attribute selector: select all anchor tags which have attribute `href` whose value end with the word `.jpg`
a[href$=".jpg"] { color: green;}
x:checked
Used of radio buttons and checkboxes.
input[type=radio]:checked { border: 1px solid black;}
x:after
A special pseudo class which can add content
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; height: 0;}
.clearfix { display: inline-block;}
x:before
A special pseudo class which can add content
.clearfix:before { content: ""; display: block; clear: both; visibility: hidden; height: 0;}
.clearfix { display: inline-block;}
x:hover
action pseudo class
div:hover { background: #e3e3e3;}
x:not(selector)div:not(#container) { background: #e3e3e3;}
x:nth-child(n)1 based indexing
li:nth-child(3) { color: red;}
li:nth-child(4n) { color: red;}
x:nth-last-child(n)1 based indexing. begins at end of the collection
li:nth-last-child(3) { color: red;}
li:nth-child(4n) { color: red;}
x:first-childul li:first-child { border-top: none;}
x:last-childul > li:last-child { border-top: none;}
Questions?
Thank You