CSS Selector

Outline
1. Basics
2. Hierarchy
3. Attribute
4. Pseudo Classes
5. Pseudo Elements

*
<html>
<body>
<div>div</div>
<p>p</p>
<a href="#">a</a>
</body></html>
* {
color: red;
}

#id
<html>
<body>
<div id="aaa">div</div>
<div>div</div>
<div id="bbb">div</div>
</body></html>
#aaa { color: blue; }#bbb { color: green; }

.class
<html>
<body>
<div class="aaa">div</div>
<div class="big-font">div</div>
<div class="bbb big-font">div</div>
</body></html>
.aaa { color: blue; }.bbb { color:
green; }.big-font { font-size: 36px; }

element
<html>
<body>
<div>div</div>
<p>p</p>
<a href="#">a</a>
</body></html>
div { color: blue; }a { font-size: 36px; color:
black; }

selector1, selector2 ...
<html>
<body>
<div>div</div>
<p>p</p>
<span>span</a>
</body></html>
div, span { color: blue; }p { font-size:
36px; }

ancestor descendant
<html>
<body>
<div>
<span>span</span>
<span class="big-font">span</span>
<p>p</p>
</div>
<div id="div-b">
<span>span</span>
<span>span</span>
<p class="big-font">p</p>
</div>
</body></html>
span { color: blue; }.big-font { font-size:
36px;}#div-b p { color: red }

parent > child
<html>
<body>
<div id="div-a">
<span>span</span>
<span class="red">span</span>
</div>
<div id="div-b">
<span>span</span>
<span>span</span>
</div>
</body></html>
span { color: blue; }div > .red { color:red; }

prev + next
<html>
<body>
<div id="container">
<ul>
<li> List Item </li>
</ul>
<p>text</p>
<p>text</p>
</div>
</body></html>
ul + p { color: red; }

prev ~ siblings
<html>
<body>
<div id="container">
<ul>
</ul>
<p>text</p>
<p>text</p>
<span>span</span>
<p>p</p>
</div>
</body></html>
ul ~ p { color: red; }

[attribute]
<html>
<body>
<a href="#">a</a><br/>
<a title="link" href="#">a</a><br/>
<a href="#">a</a>
</body></html>
a[title] {
color: red;
text-decoration: none;
}

[attribute=”value”]
<html>
<body>
<a href="lalala">a</a><br/>
<a href="macaron">a</a>
</body></html>
a[href="macaron"] {
color: red;
}

[attribute^=”value”]
<html>
<body>
<a href="cacaron">a</a><br/>
</body></html>
a[href^="ca"] {
color: red;
}

[attribute$=”value”]
<html>
<body>
</body></html>
a[href$="ron"] {
color: red;
}

[attribute*=”value”]
<html>
<body>
</body></html>
a[href*="ca"] {
color: red;
}

[attribute~=”value”]
<html>
<body>
<div title="macaron">div</div>
<div title="maluron">div</div>
<div title="macaron
maluron">div</div>
</body></html>
div[title~="macaron"] { color:
red; }div[title~="maluron"] { font-size:
36px; }

:link
<a target="_blank"
href="http://lalala/">lalala</a><a
target="_blank"
href="http://www.google.com">Google</a>
a:link {
color: blue;
}

:visited
<a target="_blank"
target="_blank"
a:visited {
color: blue;
}

:hover
<div>DIV</div> div:hover { background: #99FF66; }

:active
<a target="_blank"
target="_blank"
a:active {
background-color: yellow;
}

:checked
<html>
<body>
<p>
<input type="radio" name="radio" />
<span>radio 1</span>
</p>
<p>
<input type="radio" name="radio" />
<span>radio 2</span>
</p>
</body></html>
input[type="radio"]:checked + span {
color: blue;
}

:focus
<form>
First name:
<input type="text" name="firstname" /><br
/>
Last name:
<input type="text" name="lastname"
/></form>
input:focus {
background-color:yellow;
}

:after
<div class="clearfix">
<div>TEST DIV</div>
<div>TEST DIV</div>
<div>TEST DIV</div>
<div>TEST DIV</div>
<div>TEST
DIV</div></div>
.clearfix { display: inline-table; border:2px solid red; } .clearfix
div { float: left; width: 80px; height: 80px; border: 1px solid
blue; }.clearfix:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }/* Hides from IE-mac */ *
html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide
from IE-mac */

:not(selector)
<div class="cat">cat</div><div
class="dog">dog</div><div
class="cat">cat</div>
div:not(.dog) { background: #66AAFF; }

:first-child
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div></div>
.block :first-child {
background: #66AAFF;
}

:last-child
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block :last-child {
}

:nth-child(n)
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block :nth-child(2) {
}

:nth-last-child(n)
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block :nth-last-child(2) {
}

:first-of-type
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block div:first-of-type {
}

:last-of-type
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block span:last-of-type {
}

:nth-of-type(n)
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block div:nth-of-type(2) {
}

:nth-last-of-type(n)
<div class="block">
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
.block div:nth-last-of-type(2) {
}

:only-child
<div>
<p>P</p>
<p>P</p></div><div>
<p>P</p></div>
:only-child { color: blue; }

:only-of-type
<div>
<p> My paragraph here. </p>
<ul>
</ul></div><div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
<ul>
</ul></div>
div p:only-of-type { color: red; }li:only-of-
type { font-weight: bold; }

::first-letter
<p>Cat</p><br /><p>Dog</p> p::first-letter {
font-size: 2em;
font-weight: bold;
padding-right: 2px;
}

::first-line
<div>
<p>Cat</p>
<p>Dog</p></div>
p::first-line {
font-size: 2em;
font-weight: bold;
padding-right: 2px;
}

::after
<span>span</span><div>div</div><a
href="">a</a>
div::after {
content: 'Pseudo elements at here!';
margin-left: 20px;
color: blue;
}

::before
<span>span</span><div>div</div><a
href="">a</a>
span::before {
content: 'Pseudo elements at here!';
margin-right: 20px;
color: blue;
}

CSS Selector

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Selector

Similar to CSS Selector (20)

Recently uploaded

Recently uploaded (20)

CSS Selector