Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pseudo Elementos y Pseudo Clases en CSS
Search
SiloCreativo
June 24, 2015
Design
0
270
Pseudo Elementos y Pseudo Clases en CSS
Presentación del curso sobre Pseudo elementos y Pseudo Clases en CSS
SiloCreativo
June 24, 2015
Tweet
Share
More Decks by SiloCreativo
See All by SiloCreativo
REST API y el futuro de los themes en WordPress
silocreativo
0
1.6k
Diseño Más Responsive con WordPress
silocreativo
0
1.1k
Diseñando una mejor Experiencia Ecommerce en Responsive
silocreativo
0
1.8k
Diseño responsive y accesibilidad con WordPress: usuario vs pixel
silocreativo
1
720
Diseño Web Responsive y Accesible con Temas WordPress
silocreativo
1
11k
Tendencias de Diseño Web con WordPress. SiloCreativo
silocreativo
1
10k
De Visitante a Cliente. Optimizando el Diseño Web. SiloCreativo
silocreativo
1
180
Other Decks in Design
See All in Design
Cyber Heart Online Book
hjnasby
0
130
PF_濵村ひろみ_202503
maru_design78
0
180
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
sachi_y_portfolio
sachi337
0
300
Saudade typeface
tiagoporto
0
330
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
650
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
Карта процесса-опыта — как визуализировать сервис просто, понятно и подробно
ashapiro
0
110
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
freee + Product Design FY25Q4
freee
4
14k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
4 Signs Your Business is Dying
shpigford
184
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
A better future with KSS
kneath
238
17k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building Adaptive Systems
keathley
43
2.7k
Code Review Best Practice
trishagee
69
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
PSEUDO ELEMENTOS PSEUDO SELECTORES CSS3
¿Cuáles son? ¿Para qué sirven? TEORÍA > SELECTORES 1
selector:pseudo-clase { propiedad:valor; } selector::pseudo-elemento { propiedad:valor; } TEORÍA
“Para dar estilo a un estado especial de un elemento
o seleccionar un elemento concreto de un conjunto.” a:hover { … } a:first-child { … } PSEUDO CLASES
:hover { … } PSEUDO CLASES OK OK
a:hover { … } a:visited { … } a:active {
… } a:link { … } PSEUDO CLASES
EJEMPLO!
:focus { … } :checked { … } :disable {
… } PSEUDO CLASES
input:focus { … } input[type="checkbox"]:checked { … } input:disable {
… } PSEUDO CLASES
EJEMPLO!
:first-child { … } PSEUDO CLASES
:last-child { … } PSEUDO CLASES
:nth-child { … } PSEUDO CLASES
:nth-child(even) { … } PSEUDO CLASES
:nth-child(an+b) { … } PSEUDO CLASES
:nth-child(3n+1) { … } PSEUDO CLASES
:nth-of-type() { … } PSEUDO CLASES
EJEMPLO!
¿Cuáles son? ¿Para qué sirven? TEORÍA > ELEMENTOS 2
“Para dar estilo a una parte específica de un elemento”
a::after { … } p::first-letter { … } PSEUDO ELEMENTOS
: vs :: :pseudo-clase { … } :pseudo-elemento { …
} COMPATIBILIDAD CSS1 y 2
: vs :: :pseudo-clase { … } ::pseudo-elemento { …
} COMPATIBILIDAD CSS3
a::before { … } PSEUDO ELEMENTOS
a::after { … } PSEUDO ELEMENTOS
a::before, a::after { … } PSEUDO ELEMENTOS
¿Para qué lo puedo usar? EN PRÁCTICA 3
a::after { … } BOTONES CON ESTILO
i::before { … } FontAwesome Littlebox WEBFONTS
span::before { … } span::after { … } The Shapes
of CSS CSS SHAPES
p::first-letter { … } p::first-line { … } Rorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore CAPITAL LETTERs
Master en CSS3 AVANZADO 4
a:nth-of-type(2n+3)::after { … } a:nth-of-type(even):hover { … } ORDEN LÓGICO
FIX FLOATS Float Left Float Left Parent Element “Collapsed”
element::after { visibility: hidden; display: block; font-size: 0; content: "
"; clear: both; height: 0; } FIX FLOATS
FIX FLOATS Float Left Float Left Parent Element
::selection { … } consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore ::selection
dialog::backdrop { … } ::backdrop OK
dudas:
[email protected]
GRACIAS! silocreativo.com @silocreativo escuela.it @EscuelaIT