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>