This document discusses CSS selectors and properties, explaining that CSS is a query language used to style elements on web pages. It covers basic element, id, class and descendant selectors as well as pseudo-classes for links, checks boxes and more. The document also explains attribute selectors for selecting elements based on attributes and values.

1. CSS for Developers
Anjaneyulu Reddy BEERAVALLI
Email: anji.t6@gmail.com
Twitter: @_anji
KNOLSKAPE Solutions Pvt Ltd

2. CSS is a query language

3. .a {
font-size: 12px;
}
SELECT a
FROM dom
WHERE classname = 'a'

4. Properties

5. Selectors - The 23

6. *
* {
margin: 0;
padding: 0;
}
#container * {
border: 1px solid black;
}

7. x
x - tagname
x {
background-color: blue;
}

8. #x
#container {
border: 1px solid black;
}

9. .x
.error {
color: red;
}

10. xy
Select all `y` which are descendants of `x`
li a {
text-decoration: none;
}

11. a:visited a:link
":<param>" - pseudo class elements
a:visited {
color: red;
}
a:link {
color: purple;
}

12. x+y
select first `y` adjacent to `x`
ul + p {
color: red;
}

13. x>y
select 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>

14. x~y
select all `y` adjacent to `x`
ul ~ p {
color: red;
}

15. x[attr]
attribute selector: select all x which have attribute `title`
a[title] {
color: green;
}

16. 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 attributes
a[href="www.google.com"][title="google"] {
color: green;
}

17. a[href*="tuts"]
attribute selector: select all anchor tags which have
attribute `href` whose value contains the word `tuts`
a[href*="tuts"] {
color: green;
}

18. 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;
}

19. 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;
}

20. x:checked
Used of radio buttons and checkboxes.
input[type=radio]:checked {
border: 1px solid black;
}

21. 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;
}

22. 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;
}

23. x:hover
action pseudo class
div:hover {
background: #e3e3e3;
}

24. x:not(selector)
div:not(#container) {
background: #e3e3e3;
}

25. x:nth-child(n)
1 based indexing
li:nth-child(3) {
color: red;
}
li:nth-child(4n) {
color: red;
}

26. 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;
}

27. x:first-child
ul li:first-child {
border-top: none;
}

28. x:last-child
ul > li:last-child {
border-top: none;
}

29. Questions?

30. Thank You