pseudo css selectors
Post on 05-Jul-2015
3.182 Views
Preview:
TRANSCRIPT
Pseudo CSS Selectors
Link-related pseudo class selectors
:link
<a href = “google.com”>unvisited link</a>
/* set default style for unvisited link */
a:link{
color : blue; text-decoration : underline;
}
:visited
<a href = “google.com”>visited link</a>
/* set default style for visited link */
a: visited{
color : red;
text-decoration : underline;
}
:active
<a href = “google.com”>visited link</a>
/* set selected state style for a link */
a: active{
color : red;
}
:hover
<a href = “google.com”>visited link</a>
/* set mouseover style for link */
a: hover{
color : red;
}
Input & link related pseudo class selectors
:focus
<input type = “text” name=“user_name”/>
/* onfocus change field background */
input: focus{
background : red;
}
:target
<a href = “#set”>SET</a>
<div id =“set”>This is set</div>
/* change style of target element */
: target {
background : red;
}
:enabled | :disabled
<input type = “text” />
<input type = “text” disabled="disabled"/>
Input : enabled { /* change style of enabled element */
background : red;
}
Input : disabled { /* change style of enabled element */
background : blue;
}
:checked
<input type = “checkbox” checked="checked"/>
<input type = “radio” checked="checked" />
<input type = “checkbox” checked="checked"/>
/* change style of checked element */
Input : checked{
width : 200px;
}
Position/Number-based pseudo class selectors
:root
/* SELECT ROOT Document Element */
:root{
background : red;
}
/* Will select the <html> element*/
:first-child | :last-child
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
ul li : first-child { /* select first item*/
background : blue;
}
ul li : last-child { /* select last item*/
background : red;
}
:nth-child(N) | :nth-last-child(N)
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
ul li : nth-child(N/odd|even) {
background : blue;
}
ul li:nth-last-child(N/odd|even){
background : red;
}
:first-of-type | :last-of-type
<div> <p>A</p> <span>B</span> <p>C</p> </div>
div p : first-of-type { /* select first item of type p */
background : blue;
}
div p : last-of-type { /* select last item of type p*/
background : red;
}
:nth-of-type(N) | :nth-last-of-type(N)
<div> <p>A</p> <span>B</span> <p>C</p> </div>
div p : nth-of-type(N/odd|event){
background : blue;
}
div p : nth-of-type(N/odd|event){
background : red;
}
:only-of-type
<div> <p>A</p> <span>B</span> <p>C</p> </div>
/* select only one element from type span */
div span : only-of-type {
background : blue;
}
Relational pseudo class selectors
:not(S)
<div class=“element”></div>
<span class=“element”></span>
<p class=“element”></p>
/* select all non span elements */
.element : not(span) {
background : blue;
}
:empty
<p></p> <!-- select first item -->
<p>Content</p>
/* select the empty p element */
p : empty {
background : blue;
}
Text-related pseudo class selectors / elements
:first-letter | :first-line
<p> Lorem ipsum dolor si amet </p>
p : first-letter { /* change first letter of text style*/
font-size : 25px;
font-weight : bold
}
p : firs-line { /* change first line of text style*/
text-decoration : underline
}
Content-related pseudo "elements"
:before | :after
<span> Some text </span>
span : before { /* add extra content before span */
content : “ … ”
}
span : after { /* add extra content before span */
content : “ … ”
}
top related