Pseudo CSS Selectors
profesora92
1,177 views
25 slides
Dec 14, 2012
Slide 1 of 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
About This Presentation
No description available for this slideshow.
Slide Content
Pseudo
CSS Selectors
CSS Selectors
Link-related
pseudo class selectors
pseudo class selectors
:link
<a href = “google.com”>unvisited link</a>
/* set default style for unvisited link */
a:link{
color : blue;
text-decoration : underline;
}
<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;
}
<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;
}
<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;
}
<a href = “google.com”>visited link</a>
/* set mouseover style for link */
a: hover{
color : red;
}
Input & link related
pseudo class selectors
pseudo class selectors
:focus
<input type = “text” name=“user_name”/>
/* onfocus change field background */
input: focus{
background : red;
}
<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;
}
<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;
}
<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;
}
<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
pseudo class selectors
:root
/* SELECT ROOT Document Element */
:root{
background : red;
}
/* Will select the <html> element*/
/* 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;
}
<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;
}
<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;
}
<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;
}
<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;
}
<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
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;
}
<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;
}
<p></p> <!-- select first item -->
<p>Content</p>
/* select the empty p element */
p : empty {
background : blue;
}
Text-related
pseudo class selectors / elements
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
}
<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"
pseudo "elements"
:before | :after
<span> Some text </span>
span : before { /* add extra content before span */
content : “ … ”
}
span : after { /* add extra content before span */
content : “ … ”
}
<span> Some text </span>
span : before { /* add extra content before span */
content : “ … ”
}
span : after { /* add extra content before span */
content : “ … ”
}
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,177
- Slides 25
- Favorites 1
- Age 4737 days
Related Slideshows
11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
32 views
12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
27 views
60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
42 views
26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
41 views
![Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx](https://slidepub.com/thumb/5828/284015828.jpg)
54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
25 views
7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
25 views