prisskreative
6/26/2014 - 5:02 PM
Pseudo Classes
Pseudo Classes
/* Pseudo Class :nth-of-type - :nth-of-type
target particular type of elements*/
<body>
<div></div>
<div></div>
<div></div>
<div><p>/*only p element inside div parent */</p></div>
<p></p>/*only p element inside body*/
</body>
<style>
div:nth-of-type(2){/* Every single div inside a parent element */
background-color:red;
}
div:nth-last-of-type(2){/* Every single div inside a parent element */
background-color:red;
}
p:only-of-type{ /* Only p */
color:red;
}
p:only-of-type{ /* Only p */
color:red;
}
</style>
/* Pseudo Class :nth-child
Target any child element - expressions*/
<ul> /* parent element */
<li>first child</li>
<li>second child</li>
<li>thrid child</li>
<li>fourth child</li>
<li>last child</li>
</ul>
<style>
li:nth-child(even) {/* even */
background-color:red;
}
li:nth-child(odd)
li:nth-child(3) /* third list item */
li:nth-child(an + b) /* target more than one element */
li:nth-child(2n+3) /*n 3 is selected first and then select each two after over and over*/
li:nth-child(n+3) /*n every value after 3*/
li:nth-child(n3) /* every third list item */
li:nth-child(-n+3) /* select first three values on the list */
li:nth-last-child(-n+3) /* select last three values on the list */
</style>
<!-- UI Elements Pseudo Classes
Form elements :enabled - :disabled - checked -->
<form action="" method="POST" name="form">
<fieldset>
<legend>Contact Information</legend>
<input type="text" name="first-name" value="First Name">
<input type="text" name="email" value="email" disabled><!-- disable attribute -->
<input name="radio" id="radio1" type="radio"><label for="radio1">Option 1</label>
<input name="radio" id="radio2" type="radio"><label for="radio2">Option 2</label>
<input name="radio" id="radio3" type="radio"><label for="radio3">Option 3</label>
<input type="submit" value="Submit">
</fieldset>
</form>
<style>
/* :enabled - select ui elements button o text field when element is enabled can be focus*/
/* :disabled - doesn't accept text input */
/* :checked - doesn't accept text input */
input[type="text"]:enabled{
background:lightyellow;
}
:disabled{
background: #ccc;
}
input[type="radio"]:checked + label{ /* inmediate sibling of the radio button */
font-size:22px;
font-weight:bold;
}
</style>
/*Additional Pseudo Class :root - :target - :empty - :not
target specific parts of an html document*/
:root /* html element more specific*/
:target /* target identifier goes to the id part of the html and change the style*/
<ul>
<li><a href="#s1"></a></li><!--call fragment indentifiers href="#S1"-->
<li><a href="#s2"></a></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="s1"></div>
<div id="s2"></div>
<!-- empty div element - good use no result were found -->
<div></div>
<style>
:root{
background-color:blue;
}
:target{
background-color:blue;
color:red;
}
:empty{
background-color:red;
}
div:not(:empty){/* specific the type of element we dont want to target */
background-color:red;
}
div:not([id="s1"]){/* specific the type of element we dont want to target [id=""] */
background-color:red;
}
</style>
/* Pseudo Classes
Select elements dynamically depend on user interaction
a:link - a:visited - a:active - a:hover */
selector:pseudo-class {
property: value;
}
a:link{
color:green;
}
input:focus{
background-color:orange;
}
<!-- Structural Pseudo Classes
Good for list and navigations - first - last - only child elements -->
<ul> <!-- parent element -->
<li>first child</li>
<li>second child</li>
<li>thrid <span ="">child</span><b>!</b></li>/* b sibling element */
<li>fourth child</li>
<li>last child</li>
</ul>
<style>
li:first-child{
background-color:blue;
}
li:last-child{
background-color:red;
}
span:only-child{
background-color:red; /* only child inside the parent */
}
</style>
<!-- Pseudo Classes
Target actual elements that describe certain state -
:syntax
UI Elements Pseudo Classes
Form elements :enabled - :disabled - checked -->
<form action="" method="POST" name="form">
<fieldset>
<legend>Contact Information</legend>
<input type="text" name="first-name" value="First Name">
<input type="text" name="email" value="email" disabled><!-- disable attribute -->
<input name="radio" id="radio1" type="radio"><label for="radio1">Option 1</label>
<input name="radio" id="radio2" type="radio"><label for="radio2">Option 2</label>
<input name="radio" id="radio3" type="radio"><label for="radio3">Option 3</label>
<input type="submit" value="Submit">
</fieldset>
</form>
<style>
/* :enabled - select ui elements button o text field when element is enabled can be focus*/
/* :disabled - doesn't accept text input */
/* :checked - doesn't accept text input */
input[type="text"]:enabled{
background:lightyellow;
}
:disabled{
background: #ccc;
}
input[type="radio"]:checked + label{ /* inmediate sibling of the radio button */
font-size:22px;
font-weight:bold;
}
</style>