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
240
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.5k
Diseño Más Responsive con WordPress
silocreativo
0
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
700
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
170
Other Decks in Design
See All in Design
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
最速[要出典]アクセシビリティチェック
magi1125
2
200
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Speed Design
sergeychernyshev
25
780
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Music & Morning Musume
bryan
46
6.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for humans not robots
tammielis
250
25k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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