CSS for Developers

Anjaneyulu Reddy BEERAVALLIEmail: anji.t6@gmail.com

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