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


/* set selected state style for a link */
a: active{
color : red;
}

:hover


/* set mouseover style for link */
a: hover{
color : red;
}

Input & link related

: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

: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>
</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>
</div>

/* select only one element from type span */
div span : only-of-type {
background : blue;
}

Relational

: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> 
<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 : “ … ”
}

Pseudo CSS Selectors

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Pseudo CSS Selectors

Ähnlich wie Pseudo CSS Selectors (20)

Mehr von Михаил Петров

Mehr von Михаил Петров (10)

Pseudo CSS Selectors