Master advanced pseudo-elements and pseudo-classes for sophisticated styling. Learn complex selectors, generated content, and state-based styling patterns.
Pseudo-elements and pseudo-classes are among CSS's most powerful features, allowing you to style virtual elements and states that don't exist in the HTML markup. While basic :hover and ::before are familiar, advanced pseudo-selector techniques enable sophisticated styling patterns that would otherwise require JavaScript or additional markup.
Modern web development demands clean, semantic HTML paired with intelligent CSS that can create rich visual experiences. Advanced pseudo-selectors provide the tools to generate content dynamically, create complex interactive states, and build decorative elements that enhance user experience without cluttering the DOM.
In this comprehensive lesson, you'll master the full spectrum of pseudo-elements and pseudo-classes - from structural selectors that target elements based on their position, to advanced pseudo-element techniques for creating complex visual effects, animations, and interactive components that respond intelligently to user behavior.
Pseudo-elements create virtual elements in the DOM that can be styled and positioned like real elements. Advanced techniques leverage multiple pseudo-elements, complex positioning, and dynamic content generation to create sophisticated visual effects.
Multiple Pseudo-element Strategies:
1/* Complex card design with multiple pseudo-elements */
2.advanced-card {
3 position: relative;
4 background: white;
5 border-radius: 12px;
6 padding: 2rem;
7 overflow: hidden;
8
9 /* Create a subtle gradient overlay */
10 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
11}
12
13/* Top decorative stripe */
14.advanced-card::before {
15 content: '';
16 position: absolute;
17 top: 0;
18 left: 0;
19 right: 0;
20 height: 4px;
21 background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
22 z-index: 1;
23}
24
25/* Bottom shadow and highlight */
26.advanced-card::after {
27 content: '';
28 position: absolute;
29 bottom: -5px;
30 left: 10px;
31 right: 10px;
32 height: 20px;
33 background: rgba(0, 0, 0, 0.1);
34 border-radius: 50%;
35 filter: blur(8px);
36 z-index: -1;
37
38 /* Animate on hover */
39 transition: all 0.3s ease-out;
40}
41
42.advanced-card:hover::after {
43 bottom: -8px;
44 left: 5px;
45 right: 5px;
46 background: rgba(0, 0, 0, 0.15);
47}Dynamic Content Generation:
1/* Data-driven pseudo-element content */
2.status-indicator::before {
3 content: attr(data-status);
4 position: absolute;
5 top: -10px;
6 right: -10px;
7 background: var(--status-color, #10b981);
8 color: white;
9 font-size: 0.75rem;
10 font-weight: 600;
11 padding: 0.25rem 0.5rem;
12 border-radius: 4px;
13 text-transform: uppercase;
14 letter-spacing: 0.05em;
15}
16
17/* Status-specific styling using attribute selectors */
18.status-indicator[data-status="active"]::before {
19 --status-color: #10b981; /* Green */
20}
21
22.status-indicator[data-status="pending"]::before {
23 --status-color: #f59e0b; /* Yellow */
24}
25
26.status-indicator[data-status="error"]::before {
27 --status-color: #ef4444; /* Red */
28}
29
30.status-indicator[data-status="inactive"]::before {
31 --status-color: #6b7280; /* Gray */
32}
33
34/* Counter-based content generation */
35.step-counter {
36 counter-reset: step-number;
37}
38
39.step-item {
40 counter-increment: step-number;
41 position: relative;
42 padding-left: 3rem;
43 margin-bottom: 1.5rem;
44}
45
46.step-item::before {
47 content: counter(step-number);
48 position: absolute;
49 left: 0;
50 top: 0;
51 width: 2rem;
52 height: 2rem;
53 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
54 color: white;
55 border-radius: 50%;
56 display: flex;
57 align-items: center;
58 justify-content: center;
59 font-weight: 600;
60 font-size: 0.875rem;
61
62 /* Add depth with shadow */
63 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
64}
65
66/* Connecting lines between steps */
67.step-item:not(:last-child)::after {
68 content: '';
69 position: absolute;
70 left: 1rem;
71 top: 2rem;
72 bottom: -1.5rem;
73 width: 2px;
74 background: linear-gradient(180deg, #3b82f6, #e2e8f0);
75 transform: translateX(-1px);
76}Advanced Positioning and Layering:
1/* Complex tooltip with pseudo-element arrow */
2.tooltip-advanced {
3 position: relative;
4 display: inline-block;
5}
6
7.tooltip-advanced::before {
8 content: attr(data-tooltip);
9 position: absolute;
10 bottom: calc(100% + 10px);
11 left: 50%;
12 transform: translateX(-50%);
13
14 /* Tooltip styling */
15 background: rgba(0, 0, 0, 0.9);
16 color: white;
17 padding: 0.75rem 1rem;
18 border-radius: 8px;
19 font-size: 0.875rem;
20 white-space: nowrap;
21
22 /* Visibility control */
23 opacity: 0;
24 visibility: hidden;
25
26 /* Smooth transitions */
27 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
28
29 /* Ensure proper layering */
30 z-index: 1000;
31}
32
33/* Tooltip arrow */
34.tooltip-advanced::after {
35 content: '';
36 position: absolute;
37 bottom: calc(100% + 5px);
38 left: 50%;
39 transform: translateX(-50%);
40
41 /* Triangle shape */
42 width: 0;
43 height: 0;
44 border-left: 5px solid transparent;
45 border-right: 5px solid transparent;
46 border-top: 5px solid rgba(0, 0, 0, 0.9);
47
48 /* Visibility control */
49 opacity: 0;
50 visibility: hidden;
51
52 /* Smooth transitions */
53 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
54
55 /* Layer below tooltip */
56 z-index: 999;
57}
58
59/* Show tooltip on hover */
60.tooltip-advanced:hover::before,
61.tooltip-advanced:hover::after {
62 opacity: 1;
63 visibility: visible;
64 transform: translateX(-50%) translateY(-2px);
65}Interactive Pseudo-element Animations:
1/* Animated button with expanding background */
2.btn-expand {
3 position: relative;
4 padding: 1rem 2rem;
5 background: transparent;
6 border: 2px solid #3b82f6;
7 color: #3b82f6;
8 cursor: pointer;
9 overflow: hidden;
10 transition: color 0.4s ease;
11}
12
13.btn-expand::before {
14 content: '';
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 width: 0;
19 height: 0;
20 background: #3b82f6;
21 border-radius: 50%;
22 transform: translate(-50%, -50%);
23 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
24 z-index: -1;
25}
26
27.btn-expand:hover {
28 color: white;
29}
30
31.btn-expand:hover::before {
32 width: 300px;
33 height: 300px;
34}
35
36/* Loading spinner with pseudo-elements */
37.spinner-advanced {
38 position: relative;
39 width: 40px;
40 height: 40px;
41}
42
43.spinner-advanced::before,
44.spinner-advanced::after {
45 content: '';
46 position: absolute;
47 border-radius: 50%;
48 animation: spin-advanced 1s linear infinite;
49}
50
51.spinner-advanced::before {
52 width: 100%;
53 height: 100%;
54 border: 3px solid #e2e8f0;
55 border-top-color: #3b82f6;
56}
57
58.spinner-advanced::after {
59 width: 60%;
60 height: 60%;
61 top: 20%;
62 left: 20%;
63 border: 2px solid transparent;
64 border-top-color: #8b5cf6;
65 animation-duration: 0.7s;
66 animation-direction: reverse;
67}
68
69@keyframes spin-advanced {
70 to {
71 transform: rotate(360deg);
72 }
73}Pseudo-element Content Strategies:
1/* Icon fonts with pseudo-elements */
2.icon-text::before {
3 content: '\2713'; /* Checkmark Unicode */
4 font-family: 'Arial Unicode MS', sans-serif;
5 color: #10b981;
6 font-weight: bold;
7 margin-right: 0.5rem;
8}
9
10/* SVG data URLs in pseudo-elements */
11.icon-svg::before {
12 content: '';
13 display: inline-block;
14 width: 1rem;
15 height: 1rem;
16 margin-right: 0.5rem;
17 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>');
18 background-size: contain;
19 background-repeat: no-repeat;
20 vertical-align: middle;
21}
22
23/* Custom quote styling */
24.quote-fancy {
25 position: relative;
26 font-style: italic;
27 font-size: 1.25rem;
28 line-height: 1.6;
29 padding: 2rem;
30 text-align: center;
31}
32
33.quote-fancy::before,
34.quote-fancy::after {
35 content: '"';
36 font-size: 4rem;
37 color: #3b82f6;
38 position: absolute;
39 font-family: Georgia, serif;
40 line-height: 1;
41}
42
43.quote-fancy::before {
44 top: 0.5rem;
45 left: 0.5rem;
46}
47
48.quote-fancy::after {
49 bottom: 0.5rem;
50 right: 0.5rem;
51 transform: rotate(180deg);
52}These advanced pseudo-element techniques enable sophisticated visual effects while maintaining clean, semantic markup and excellent performance through CSS-only implementations.
Advanced pseudo-class selectors provide powerful tools for targeting elements based on their state, position, or relationship to other elements. Understanding these selectors enables precise styling without JavaScript.
Structural Pseudo-classes for Layout Control:
1/* Advanced nth-child patterns */
2.grid-container {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5 gap: 1.5rem;
6}
7
8/* Color alternating items with complex pattern */
9.grid-item:nth-child(4n+1) {
10 background: linear-gradient(135deg, #3b82f6, #1e40af);
11}
12
13.grid-item:nth-child(4n+2) {
14 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
15}
16
17.grid-item:nth-child(4n+3) {
18 background: linear-gradient(135deg, #06b6d4, #0891b2);
19}
20
21.grid-item:nth-child(4n+4) {
22 background: linear-gradient(135deg, #10b981, #059669);
23}
24
25/* First and last row special styling */
26.grid-item:nth-child(-n+3) {
27 /* First row items (assuming 3 columns) */
28 border-top: 3px solid gold;
29 transform: translateY(-5px);
30}
31
32.grid-item:nth-last-child(-n+3) {
33 /* Last row items */
34 border-bottom: 3px solid gold;
35 margin-bottom: 0;
36}
37
38/* Target specific positions in flexible layouts */
39.card-list .card:only-child {
40 /* Single card gets centered styling */
41 max-width: 400px;
42 margin: 0 auto;
43}
44
45.card-list .card:first-child:nth-last-child(2),
46.card-list .card:first-child:nth-last-child(2) ~ .card {
47 /* Exactly 2 cards - side by side styling */
48 flex: 1;
49 max-width: 48%;
50}
51
52.card-list .card:first-child:nth-last-child(3),
53.card-list .card:first-child:nth-last-child(3) ~ .card {
54 /* Exactly 3 cards - equal width */
55 flex: 1;
56 max-width: 32%;
57}State-based and Interactive Pseudo-classes:
1/* Advanced focus management */
2.form-field {
3 position: relative;
4 margin-bottom: 1.5rem;
5}
6
7.form-field input {
8 width: 100%;
9 padding: 1rem;
10 border: 2px solid #e2e8f0;
11 border-radius: 8px;
12 font-size: 1rem;
13 transition: all 0.3s ease;
14 background: white;
15}
16
17/* Focus states with enhanced accessibility */
18.form-field input:focus {
19 outline: none;
20 border-color: #3b82f6;
21 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
22 transform: translateY(-2px);
23}
24
25/* Focus-within for parent containers */
26.form-field:focus-within label {
27 color: #3b82f6;
28 transform: translateY(-8px) scale(0.85);
29}
30
31/* Invalid state styling */
32.form-field input:invalid {
33 border-color: #ef4444;
34}
35
36.form-field input:invalid:focus {
37 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
38}
39
40/* Valid state styling */
41.form-field input:valid:not(:placeholder-shown) {
42 border-color: #10b981;
43 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%2310b981"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>');
44 background-position: right 1rem center;
45 background-size: 1rem;
46 background-repeat: no-repeat;
47 padding-right: 3rem;
48}
49
50/* Placeholder shown state */
51.form-field input:placeholder-shown ~ label {
52 transform: translateY(0) scale(1);
53 color: #9ca3af;
54}Advanced Selection and Targeting:
1/* Complex attribute-based selectors */
2[data-theme="dark"] .component {
3 --background-color: #1f2937;
4 --text-color: #f9fafb;
5 --border-color: #374151;
6}
7
8/* Multiple attribute combinations */
9.button[data-variant="primary"][data-size="large"] {
10 padding: 1rem 2rem;
11 font-size: 1.125rem;
12 background: linear-gradient(135deg, #3b82f6, #1e40af);
13}
14
15.button[data-variant="secondary"][data-size="large"] {
16 padding: 1rem 2rem;
17 font-size: 1.125rem;
18 border: 2px solid #3b82f6;
19 background: transparent;
20 color: #3b82f6;
21}
22
23/* Language-based styling */
24:lang(ar) .text-content {
25 direction: rtl;
26 text-align: right;
27}
28
29:lang(ja) .text-content {
30 line-height: 1.8;
31 font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
32}
33
34/* Target-based interactions */
35.tab-panel {
36 display: none;
37 padding: 2rem;
38 background: white;
39 border-radius: 0 8px 8px 8px;
40 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
41}
42
43.tab-panel:target {
44 display: block;
45 animation: slideInFromRight 0.3s ease-out;
46}
47
48@keyframes slideInFromRight {
49 from {
50 transform: translateX(20px);
51 opacity: 0;
52 }
53 to {
54 transform: translateX(0);
55 opacity: 1;
56 }
57}
58
59/* Sibling combinator patterns */
60.toggle-checkbox:checked ~ .toggle-content {
61 max-height: 200px;
62 padding: 1rem;
63 opacity: 1;
64}
65
66.toggle-content {
67 max-height: 0;
68 overflow: hidden;
69 opacity: 0;
70 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
71}
72
73/* Adjacent sibling styling for form validation */
74.form-input:invalid + .error-message {
75 display: block;
76 color: #ef4444;
77 font-size: 0.875rem;
78 margin-top: 0.25rem;
79}
80
81.error-message {
82 display: none;
83}Advanced Hover and Interaction Patterns:
1/* Multi-level hover interactions */
2.card-container:hover .card {
3 transform: scale(0.95);
4 filter: blur(2px);
5 opacity: 0.7;
6}
7
8.card-container:hover .card:hover {
9 transform: scale(1.05);
10 filter: blur(0);
11 opacity: 1;
12 z-index: 10;
13 position: relative;
14}
15
16/* Directional hover effects */
17.directional-hover {
18 position: relative;
19 overflow: hidden;
20}
21
22.directional-hover::before {
23 content: '';
24 position: absolute;
25 top: 0;
26 left: -100%;
27 width: 100%;
28 height: 100%;
29 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
30 transition: left 0.5s ease-out;
31}
32
33.directional-hover:hover::before {
34 left: 100%;
35}
36
37/* Group hover interactions */
38.team-member {
39 transition: all 0.3s ease;
40 filter: grayscale(100%);
41}
42
43.team-grid:hover .team-member:not(:hover) {
44 transform: scale(0.95);
45 opacity: 0.6;
46}
47
48.team-grid:hover .team-member:hover {
49 filter: grayscale(0%);
50 transform: scale(1.1);
51 z-index: 5;
52}Responsive and Conditional Pseudo-classes:
1/* Media query aware pseudo-classes */
2@media (hover: hover) {
3 .interactive-element:hover {
4 transform: translateY(-5px);
5 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
6 }
7}
8
9@media (hover: none) {
10 .interactive-element:active {
11 transform: scale(0.98);
12 }
13}
14
15/* Pointer precision aware styling */
16@media (pointer: coarse) {
17 .button {
18 min-height: 44px; /* Larger touch targets */
19 padding: 1rem 1.5rem;
20 }
21}
22
23@media (pointer: fine) {
24 .button {
25 min-height: 32px;
26 padding: 0.5rem 1rem;
27 }
28}
29
30/* Reduced motion preferences */
31@media (prefers-reduced-motion: reduce) {
32 .animated-element:hover {
33 transform: none;
34 transition: background-color 0.2s ease;
35 }
36}
37
38@media (prefers-reduced-motion: no-preference) {
39 .animated-element:hover {
40 transform: translateY(-5px) rotate(5deg) scale(1.05);
41 transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
42 }
43}
44
45/* High contrast mode adaptations */
46@media (prefers-contrast: high) {
47 .subtle-border {
48 border-width: 2px;
49 border-style: solid;
50 }
51
52 .subtle-background:hover {
53 background: ButtonHighlight;
54 color: ButtonText;
55 }
56}These advanced pseudo-class patterns enable sophisticated interaction designs that adapt to user context, device capabilities, and accessibility preferences while maintaining clean, maintainable CSS architecture.
Structural pseudo-classes provide powerful tools for creating intelligent layout patterns that adapt based on content quantity, position, and relationships. These selectors eliminate the need for complex JavaScript logic in many layout scenarios.
Quantity-based Layout Adaptation:
1/* Flexible navigation that adapts to item count */
2.nav-list {
3 display: flex;
4 list-style: none;
5 padding: 0;
6 margin: 0;
7 background: white;
8 border-radius: 12px;
9 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
10}
11
12/* 1-3 items: center aligned with generous spacing */
13.nav-item:first-child:nth-last-child(1),
14.nav-item:first-child:nth-last-child(2),
15.nav-item:first-child:nth-last-child(3),
16.nav-item:first-child:nth-last-child(1) ~ .nav-item,
17.nav-item:first-child:nth-last-child(2) ~ .nav-item,
18.nav-item:first-child:nth-last-child(3) ~ .nav-item {
19 flex: 1;
20 text-align: center;
21 padding: 1rem 2rem;
22 font-size: 1.125rem;
23}
24
25/* 4-6 items: compact spacing */
26.nav-item:first-child:nth-last-child(4),
27.nav-item:first-child:nth-last-child(5),
28.nav-item:first-child:nth-last-child(6),
29.nav-item:first-child:nth-last-child(4) ~ .nav-item,
30.nav-item:first-child:nth-last-child(5) ~ .nav-item,
31.nav-item:first-child:nth-last-child(6) ~ .nav-item {
32 flex: 1;
33 text-align: center;
34 padding: 0.75rem 1rem;
35 font-size: 1rem;
36}
37
38/* 7+ items: minimal spacing with overflow handling */
39.nav-item:first-child:nth-last-child(n+7),
40.nav-item:first-child:nth-last-child(n+7) ~ .nav-item {
41 flex: 0 0 auto;
42 padding: 0.5rem 0.75rem;
43 font-size: 0.875rem;
44 white-space: nowrap;
45}
46
47.nav-list:has(.nav-item:first-child:nth-last-child(n+7)) {
48 overflow-x: auto;
49 scrollbar-width: none;
50 -ms-overflow-style: none;
51}
52
53.nav-list:has(.nav-item:first-child:nth-last-child(n+7))::-webkit-scrollbar {
54 display: none;
55}Advanced Grid Layout Patterns:
1/* Intelligent card grid that adapts to content count */
2.adaptive-grid {
3 display: grid;
4 gap: 1.5rem;
5 padding: 2rem;
6}
7
8/* Single item: centered and larger */
9.adaptive-grid:has(.grid-card:only-child) {
10 grid-template-columns: 1fr;
11 place-items: center;
12}
13
14.adaptive-grid .grid-card:only-child {
15 max-width: 500px;
16 padding: 3rem;
17 font-size: 1.25rem;
18}
19
20/* Two items: side by side */
21.adaptive-grid:has(.grid-card:first-child:nth-last-child(2)) {
22 grid-template-columns: 1fr 1fr;
23}
24
25/* Three items: one large, two small */
26.adaptive-grid:has(.grid-card:first-child:nth-last-child(3)) {
27 grid-template-columns: 2fr 1fr;
28 grid-template-rows: repeat(2, 1fr);
29}
30
31.adaptive-grid:has(.grid-card:first-child:nth-last-child(3)) .grid-card:first-child {
32 grid-row: 1 / -1;
33}
34
35/* Four items: 2x2 grid */
36.adaptive-grid:has(.grid-card:first-child:nth-last-child(4)) {
37 grid-template-columns: 1fr 1fr;
38 grid-template-rows: 1fr 1fr;
39}
40
41/* Five items: featured + grid */
42.adaptive-grid:has(.grid-card:first-child:nth-last-child(5)) {
43 grid-template-columns: repeat(4, 1fr);
44 grid-template-rows: repeat(2, 1fr);
45}
46
47.adaptive-grid:has(.grid-card:first-child:nth-last-child(5)) .grid-card:first-child {
48 grid-column: 1 / 3;
49 grid-row: 1 / -1;
50}
51
52/* Six or more: regular grid */
53.adaptive-grid:has(.grid-card:first-child:nth-last-child(n+6)) {
54 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
55}Position-aware Styling Patterns:
1/* Article list with intelligent spacing and styling */
2.article-list {
3 max-width: 800px;
4 margin: 0 auto;
5}
6
7.article-item {
8 padding: 2rem 0;
9 border-bottom: 1px solid #e2e8f0;
10 position: relative;
11}
12
13/* First article gets special treatment */
14.article-item:first-child {
15 padding-top: 0;
16 border-top: none;
17 font-size: 1.125rem;
18
19 /* Add featured badge */
20}
21
22.article-item:first-child::before {
23 content: 'Featured';
24 position: absolute;
25 top: 0;
26 right: 0;
27 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
28 color: white;
29 padding: 0.25rem 0.75rem;
30 border-radius: 0 0 0 8px;
31 font-size: 0.75rem;
32 font-weight: 600;
33 text-transform: uppercase;
34 letter-spacing: 0.05em;
35}
36
37/* Last article removes bottom border */
38.article-item:last-child {
39 border-bottom: none;
40 padding-bottom: 0;
41}
42
43/* Alternating background for readability */
44.article-item:nth-child(even) {
45 background: rgba(248, 250, 252, 0.5);
46 margin: 0 -2rem;
47 padding-left: 2rem;
48 padding-right: 2rem;
49 border-radius: 8px;
50}
51
52/* Special styling for middle items in small lists */
53.article-item:first-child:nth-last-child(3),
54.article-item:first-child:nth-last-child(3) ~ .article-item:last-child {
55 /* In 3-item list, first and last get subtle emphasis */
56 position: relative;
57}
58
59.article-item:first-child:nth-last-child(3)::after,
60.article-item:first-child:nth-last-child(3) ~ .article-item:last-child::after {
61 content: '';
62 position: absolute;
63 left: -1rem;
64 top: 50%;
65 width: 4px;
66 height: 40%;
67 background: linear-gradient(180deg, #3b82f6, #8b5cf6);
68 border-radius: 2px;
69 transform: translateY(-50%);
70}Complex Interaction Patterns:
1/* Advanced form section with conditional styling */
2.form-section {
3 margin-bottom: 2rem;
4 padding: 1.5rem;
5 border: 1px solid #e2e8f0;
6 border-radius: 12px;
7 transition: all 0.3s ease;
8}
9
10/* Section becomes active when any child has focus */
11.form-section:focus-within {
12 border-color: #3b82f6;
13 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
14 transform: translateY(-2px);
15}
16
17/* Required sections get visual indicator */
18.form-section:has([required]) {
19 position: relative;
20}
21
22.form-section:has([required])::before {
23 content: 'Required';
24 position: absolute;
25 top: -8px;
26 right: 16px;
27 background: #ef4444;
28 color: white;
29 font-size: 0.75rem;
30 padding: 0.25rem 0.5rem;
31 border-radius: 4px;
32 font-weight: 600;
33}
34
35/* Completed sections get success styling */
36.form-section:has(input:valid:not(:placeholder-shown)) {
37 border-color: #10b981;
38 background: rgba(16, 185, 129, 0.02);
39}
40
41.form-section:has(input:valid:not(:placeholder-shown))::after {
42 content: '✓';
43 position: absolute;
44 top: 1rem;
45 right: 1rem;
46 color: #10b981;
47 font-weight: bold;
48 font-size: 1.25rem;
49}
50
51/* Error state for sections with invalid inputs */
52.form-section:has(input:invalid:not(:placeholder-shown)) {
53 border-color: #ef4444;
54 background: rgba(239, 68, 68, 0.02);
55}
56
57/* Progressive disclosure pattern */
58.step-container {
59 position: relative;
60}
61
62.step {
63 display: none;
64 opacity: 0;
65 transform: translateX(20px);
66 transition: all 0.4s ease;
67}
68
69/* Show current step */
70.step:target {
71 display: block;
72 opacity: 1;
73 transform: translateX(0);
74}
75
76/* Show first step by default when no target */
77.step-container:not(:has(:target)) .step:first-child {
78 display: block;
79 opacity: 1;
80 transform: translateX(0);
81}Responsive Structural Patterns:
1/* Mobile-first responsive navigation */
2@media (max-width: 768px) {
3 /* On mobile, collapse to hamburger after 3 items */
4 .nav-item:first-child:nth-last-child(n+4) ~ .nav-item:nth-child(n+4) {
5 display: none;
6 }
7
8 /* Show overflow indicator */
9 .nav-list:has(.nav-item:first-child:nth-last-child(n+4))::after {
10 content: '⋯';
11 display: flex;
12 align-items: center;
13 justify-content: center;
14 padding: 0.75rem;
15 font-size: 1.5rem;
16 color: #6b7280;
17 }
18}
19
20@media (min-width: 769px) and (max-width: 1024px) {
21 /* Tablet: show up to 6 items */
22 .nav-item:first-child:nth-last-child(n+7) ~ .nav-item:nth-child(n+7) {
23 display: none;
24 }
25}
26
27/* Container query-style patterns using content-based selectors */
28.responsive-container:has(.content:first-child:nth-last-child(n+10)) {
29 /* Many items: compact grid */
30 column-count: 3;
31 column-gap: 2rem;
32}
33
34.responsive-container:has(.content:first-child:nth-last-child(-n+4)) {
35 /* Few items: spacious layout */
36 display: flex;
37 flex-direction: column;
38 gap: 3rem;
39 align-items: center;
40}These structural selector patterns create intelligent, content-aware layouts that automatically adapt to different scenarios without requiring JavaScript or complex media queries, resulting in more maintainable and performant designs.
Combining pseudo-elements and pseudo-classes with animations creates sophisticated interactive experiences. These patterns leverage CSS-only solutions for complex UI behaviors that traditionally required JavaScript.
Multi-stage Animation Sequences:
1/* Complex button with multiple pseudo-element animations */
2.btn-complex {
3 position: relative;
4 padding: 1rem 2rem;
5 background: linear-gradient(135deg, #3b82f6, #1e40af);
6 color: white;
7 border: none;
8 border-radius: 12px;
9 cursor: pointer;
10 overflow: hidden;
11 font-weight: 600;
12 letter-spacing: 0.025em;
13
14 /* Transform origin for scaling */
15 transform-origin: center;
16 transition: transform 0.2s ease;
17}
18
19/* Animated background shimmer */
20.btn-complex::before {
21 content: '';
22 position: absolute;
23 top: 0;
24 left: -100%;
25 width: 100%;
26 height: 100%;
27 background: linear-gradient(90deg,
28 transparent,
29 rgba(255, 255, 255, 0.4),
30 transparent
31 );
32 transition: left 0.6s ease;
33}
34
35/* Pulse ring animation */
36.btn-complex::after {
37 content: '';
38 position: absolute;
39 top: 50%;
40 left: 50%;
41 width: 0;
42 height: 0;
43 border: 2px solid rgba(255, 255, 255, 0.6);
44 border-radius: 50%;
45 transform: translate(-50%, -50%);
46 animation: pulse-ring 2s infinite;
47 opacity: 0;
48}
49
50/* Hover interactions */
51.btn-complex:hover {
52 transform: translateY(-2px);
53}
54
55.btn-complex:hover::before {
56 left: 100%;
57 transition-duration: 0.4s;
58}
59
60.btn-complex:active {
61 transform: translateY(0) scale(0.98);
62}
63
64.btn-complex:active::after {
65 animation-play-state: paused;
66}
67
68@keyframes pulse-ring {
69 0% {
70 width: 0;
71 height: 0;
72 opacity: 1;
73 }
74 70%, 100% {
75 width: 60px;
76 height: 60px;
77 opacity: 0;
78 }
79}Interactive Card Stack Animation:
1/* Stacked cards with hover interactions */
2.card-stack {
3 position: relative;
4 width: 300px;
5 height: 200px;
6 perspective: 1000px;
7}
8
9.card-stack .card {
10 position: absolute;
11 width: 100%;
12 height: 100%;
13 background: white;
14 border-radius: 16px;
15 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
16 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
17 cursor: pointer;
18
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 font-size: 1.25rem;
23 font-weight: 600;
24}
25
26/* Stack positioning */
27.card-stack .card:nth-child(1) {
28 z-index: 3;
29 transform: translateY(0px) rotateY(0deg);
30}
31
32.card-stack .card:nth-child(2) {
33 z-index: 2;
34 transform: translateY(8px) rotateY(-5deg);
35 opacity: 0.9;
36}
37
38.card-stack .card:nth-child(3) {
39 z-index: 1;
40 transform: translateY(16px) rotateY(-10deg);
41 opacity: 0.8;
42}
43
44/* Hover interactions - spread the stack */
45.card-stack:hover .card:nth-child(1) {
46 transform: translateY(-20px) rotateY(10deg) translateX(20px);
47}
48
49.card-stack:hover .card:nth-child(2) {
50 transform: translateY(0px) rotateY(0deg) translateX(0px);
51 z-index: 4;
52}
53
54.card-stack:hover .card:nth-child(3) {
55 transform: translateY(20px) rotateY(-10deg) translateX(-20px);
56}
57
58/* Individual card hover in spread state */
59.card-stack:hover .card:hover {
60 transform: translateY(-10px) scale(1.05) rotateY(0deg) !important;
61 z-index: 10 !important;
62 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
63}Advanced Loading Animation Patterns:
1/* Skeleton loading with pseudo-elements */
2.skeleton-loader {
3 position: relative;
4 background: #f3f4f6;
5 border-radius: 8px;
6 overflow: hidden;
7}
8
9.skeleton-loader::before {
10 content: '';
11 position: absolute;
12 top: 0;
13 left: -100%;
14 width: 100%;
15 height: 100%;
16 background: linear-gradient(90deg,
17 transparent,
18 rgba(255, 255, 255, 0.8),
19 transparent
20 );
21 animation: skeleton-shimmer 1.5s infinite;
22}
23
24@keyframes skeleton-shimmer {
25 0% { left: -100%; }
26 100% { left: 100%; }
27}
28
29/* Progressive loading states */
30.progress-indicator {
31 position: relative;
32 width: 200px;
33 height: 4px;
34 background: #e2e8f0;
35 border-radius: 2px;
36 overflow: hidden;
37}
38
39.progress-indicator::before {
40 content: '';
41 position: absolute;
42 top: 0;
43 left: 0;
44 height: 100%;
45 background: linear-gradient(90deg, #3b82f6, #8b5cf6);
46 border-radius: 2px;
47 width: var(--progress, 0%);
48 transition: width 0.3s ease;
49}
50
51/* Pulsing dot indicator */
52.progress-indicator::after {
53 content: '';
54 position: absolute;
55 top: -4px;
56 left: calc(var(--progress, 0%) - 6px);
57 width: 12px;
58 height: 12px;
59 background: #3b82f6;
60 border-radius: 50%;
61 animation: progress-pulse 1s infinite;
62 transition: left 0.3s ease;
63}
64
65@keyframes progress-pulse {
66 0%, 100% { transform: scale(1); opacity: 1; }
67 50% { transform: scale(1.2); opacity: 0.7; }
68}Interactive Form Validation Animations:
1/* Animated form field with validation states */
2.form-field-animated {
3 position: relative;
4 margin: 2rem 0;
5}
6
7.form-field-animated input {
8 width: 100%;
9 padding: 1rem;
10 border: 2px solid #e2e8f0;
11 border-radius: 8px;
12 font-size: 1rem;
13 background: white;
14 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
15}
16
17.form-field-animated label {
18 position: absolute;
19 top: 1rem;
20 left: 1rem;
21 color: #9ca3af;
22 pointer-events: none;
23 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24 background: white;
25 padding: 0 0.25rem;
26}
27
28/* Focus state animations */
29.form-field-animated input:focus {
30 border-color: #3b82f6;
31 outline: none;
32}
33
34.form-field-animated input:focus + label,
35.form-field-animated input:not(:placeholder-shown) + label {
36 top: -0.5rem;
37 left: 0.75rem;
38 font-size: 0.875rem;
39 color: #3b82f6;
40 background: white;
41}
42
43/* Validation state pseudo-elements */
44.form-field-animated input:valid:not(:placeholder-shown) {
45 border-color: #10b981;
46 padding-right: 3rem;
47}
48
49.form-field-animated input:valid:not(:placeholder-shown)::after {
50 content: '✓';
51 position: absolute;
52 right: 1rem;
53 top: 50%;
54 transform: translateY(-50%);
55 color: #10b981;
56 font-weight: bold;
57}
58
59.form-field-animated input:invalid:not(:placeholder-shown) {
60 border-color: #ef4444;
61 animation: shake 0.4s ease-in-out;
62}
63
64@keyframes shake {
65 0%, 100% { transform: translateX(0); }
66 25% { transform: translateX(-5px); }
67 75% { transform: translateX(5px); }
68}
69
70/* Error message animation */
71.form-field-animated input:invalid:not(:placeholder-shown) ~ .error-message {
72 display: block;
73 color: #ef4444;
74 font-size: 0.875rem;
75 margin-top: 0.5rem;
76 animation: slideDown 0.3s ease-out;
77}
78
79.error-message {
80 display: none;
81}
82
83@keyframes slideDown {
84 from {
85 opacity: 0;
86 transform: translateY(-10px);
87 }
88 to {
89 opacity: 1;
90 transform: translateY(0);
91 }
92}Advanced Tooltip and Popover Animations:
1/* Multi-directional animated tooltips */
2.tooltip-multi {
3 position: relative;
4 display: inline-block;
5}
6
7.tooltip-multi::before {
8 content: attr(data-tooltip);
9 position: absolute;
10 padding: 0.75rem 1rem;
11 background: rgba(0, 0, 0, 0.9);
12 color: white;
13 border-radius: 8px;
14 font-size: 0.875rem;
15 white-space: nowrap;
16 z-index: 1000;
17
18 /* Initial state */
19 opacity: 0;
20 visibility: hidden;
21 transform: scale(0.8);
22 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
23}
24
25.tooltip-multi::after {
26 content: '';
27 position: absolute;
28 border: 6px solid transparent;
29 z-index: 999;
30
31 /* Initial state */
32 opacity: 0;
33 visibility: hidden;
34 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
35}
36
37/* Top tooltip (default) */
38.tooltip-multi:not([data-position])::before,
39.tooltip-multi[data-position="top"]::before {
40 bottom: calc(100% + 12px);
41 left: 50%;
42 transform: translateX(-50%) scale(0.8);
43}
44
45.tooltip-multi:not([data-position])::after,
46.tooltip-multi[data-position="top"]::after {
47 bottom: calc(100% + 6px);
48 left: 50%;
49 transform: translateX(-50%);
50 border-top-color: rgba(0, 0, 0, 0.9);
51}
52
53/* Right tooltip */
54.tooltip-multi[data-position="right"]::before {
55 top: 50%;
56 left: calc(100% + 12px);
57 transform: translateY(-50%) scale(0.8);
58}
59
60.tooltip-multi[data-position="right"]::after {
61 top: 50%;
62 left: calc(100% + 6px);
63 transform: translateY(-50%);
64 border-right-color: rgba(0, 0, 0, 0.9);
65}
66
67/* Show tooltip on hover */
68.tooltip-multi:hover::before,
69.tooltip-multi:hover::after {
70 opacity: 1;
71 visibility: visible;
72 transform: translateX(-50%) scale(1);
73}
74
75.tooltip-multi[data-position="right"]:hover::before,
76.tooltip-multi[data-position="right"]:hover::after {
77 transform: translateY(-50%) scale(1);
78}
79
80/* Staggered animation for tooltip content */
81.tooltip-multi:hover::before {
82 transition-delay: 0.1s;
83}
84
85.tooltip-multi:hover::after {
86 transition-delay: 0s;
87}These animation patterns demonstrate how pseudo-elements and pseudo-classes can create complex, performant interactions without JavaScript, providing smooth user experiences while maintaining excellent performance and accessibility.
A comprehensive demonstration of advanced pseudo-elements and pseudo-classes, showcasing complex selectors, generated content, interactive animations, and sophisticated styling patterns.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Advanced Pseudo-elements & Pseudo-classes</title>
7 <style>
8 /* =================
9 RESET & BASE STYLES
10 ================= */
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16
17 body {
18 font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
19 line-height: 1.6;
20 color: #1e293b;
21 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22 min-height: 100vh;
23 overflow-x: hidden;
24 }
25
26 .container {
27 max-width: 1200px;
28 margin: 0 auto;
29 padding: 2rem;
30 }
31
32 /* =================
33 HEADER WITH ANIMATED TITLE
34 ================= */
35 .header {
36 text-align: center;
37 margin-bottom: 4rem;
38 position: relative;
39 }
40
41 .header h1 {
42 font-size: 3.5rem;
43 color: white;
44 margin-bottom: 1rem;
45 position: relative;
46 display: inline-block;
47 }
48
49 /* Animated underline using pseudo-element */
50 .header h1::after {
51 content: '';
52 position: absolute;
53 bottom: -10px;
54 left: 50%;
55 width: 0;
56 height: 4px;
57 background: linear-gradient(90deg, #06b6d4, #8b5cf6);
58 transform: translateX(-50%);
59 animation: expandLine 2s ease-out 0.5s forwards;
60 border-radius: 2px;
61 }
62
63 @keyframes expandLine {
64 to {
65 width: 100%;
66 }
67 }
68
69 .header p {
70 font-size: 1.25rem;
71 color: rgba(255,255,255,0.9);
72 max-width: 600px;
73 margin: 0 auto;
74 position: relative;
75 opacity: 0;
76 animation: fadeInUp 1s ease-out 1s forwards;
77 }
78
79 @keyframes fadeInUp {
80 from {
81 opacity: 0;
82 transform: translateY(20px);
83 }
84 to {
85 opacity: 1;
86 transform: translateY(0);
87 }
88 }
89
90 /* =================
91 DEMO SECTION STYLING
92 ================= */
93 .demo-section {
94 background: rgba(255, 255, 255, 0.95);
95 margin-bottom: 3rem;
96 padding: 2.5rem;
97 border-radius: 20px;
98 box-shadow: 0 8px 32px rgba(0,0,0,0.1);
99 backdrop-filter: blur(10px);
100 position: relative;
101 overflow: hidden;
102 }
103
104 /* Decorative corner elements using pseudo-elements */
105 .demo-section::before {
106 content: '';
107 position: absolute;
108 top: 0;
109 right: 0;
110 width: 60px;
111 height: 60px;
112 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
113 clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
114 opacity: 0.1;
115 }
116
117 .demo-section h2 {
118 font-size: 2rem;
119 margin-bottom: 1.5rem;
120 color: #2563eb;
121 position: relative;
122 }
123
124 /* Animated section number using counter */
125 .container {
126 counter-reset: section-counter;
127 }
128
129 .demo-section {
130 counter-increment: section-counter;
131 }
132
133 .demo-section h2::before {
134 content: counter(section-counter, decimal-leading-zero);
135 position: absolute;
136 left: -4rem;
137 top: 0;
138 font-size: 1rem;
139 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
140 color: white;
141 width: 2.5rem;
142 height: 2.5rem;
143 border-radius: 50%;
144 display: flex;
145 align-items: center;
146 justify-content: center;
147 font-weight: 600;
148 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
149 }
150
151 /* =================
152 ADVANCED BUTTON SHOWCASE
153 ================= */
154 .button-showcase {
155 display: grid;
156 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
157 gap: 2rem;
158 margin-bottom: 3rem;
159 }
160
161 /* Multi-layer animated button */
162 .btn-advanced {
163 position: relative;
164 padding: 1rem 2rem;
165 background: linear-gradient(135deg, #3b82f6, #1e40af);
166 color: white;
167 border: none;
168 border-radius: 12px;
169 cursor: pointer;
170 font-weight: 600;
171 font-size: 1rem;
172 overflow: hidden;
173 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
174 transform: translateY(0);
175 }
176
177 /* Shimmer effect */
178 .btn-advanced::before {
179 content: '';
180 position: absolute;
181 top: 0;
182 left: -100%;
183 width: 100%;
184 height: 100%;
185 background: linear-gradient(90deg,
186 transparent,
187 rgba(255, 255, 255, 0.4),
188 transparent
189 );
190 transition: left 0.6s ease;
191 }
192
193 /* Pulse ring */
194 .btn-advanced::after {
195 content: '';
196 position: absolute;
197 top: 50%;
198 left: 50%;
199 width: 0;
200 height: 0;
201 border: 2px solid rgba(255, 255, 255, 0.6);
202 border-radius: 50%;
203 transform: translate(-50%, -50%);
204 animation: pulseRing 2s infinite;
205 opacity: 0;
206 }
207
208 @keyframes pulseRing {
209 0% { width: 0; height: 0; opacity: 1; }
210 70%, 100% { width: 60px; height: 60px; opacity: 0; }
211 }
212
213 .btn-advanced:hover {
214 transform: translateY(-3px);
215 box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
216 }
217
218 .btn-advanced:hover::before {
219 left: 100%;
220 }
221
222 /* Expanding background button */
223 .btn-expand {
224 position: relative;
225 padding: 1rem 2rem;
226 background: transparent;
227 border: 2px solid #8b5cf6;
228 color: #8b5cf6;
229 border-radius: 8px;
230 cursor: pointer;
231 font-weight: 600;
232 overflow: hidden;
233 transition: color 0.4s ease;
234 }
235
236 .btn-expand::before {
237 content: '';
238 position: absolute;
239 top: 50%;
240 left: 50%;
241 width: 0;
242 height: 0;
243 background: #8b5cf6;
244 border-radius: 50%;
245 transform: translate(-50%, -50%);
246 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
247 z-index: -1;
248 }
249
250 .btn-expand:hover {
251 color: white;
252 }
253
254 .btn-expand:hover::before {
255 width: 300px;
256 height: 300px;
257 }
258
259 /* =================
260 PSEUDO-CLASS FORM DEMO
261 ================= */
262 .form-demo {
263 display: grid;
264 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
265 gap: 2rem;
266 margin: 2rem 0;
267 }
268
269 .form-field {
270 position: relative;
271 margin-bottom: 2rem;
272 }
273
274 .form-field input {
275 width: 100%;
276 padding: 1rem;
277 border: 2px solid #e2e8f0;
278 border-radius: 8px;
279 font-size: 1rem;
280 background: white;
281 transition: all 0.3s ease;
282 }
283
284 .form-field label {
285 position: absolute;
286 top: 1rem;
287 left: 1rem;
288 color: #9ca3af;
289 pointer-events: none;
290 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
291 background: white;
292 padding: 0 0.25rem;
293 }
294
295 /* Focus state animations */
296 .form-field input:focus {
297 border-color: #3b82f6;
298 outline: none;
299 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
300 }
301
302 .form-field input:focus + label,
303 .form-field input:not(:placeholder-shown) + label {
304 top: -0.5rem;
305 left: 0.75rem;
306 font-size: 0.875rem;
307 color: #3b82f6;
308 }
309
310 /* Validation states */
311 .form-field input:valid:not(:placeholder-shown) {
312 border-color: #10b981;
313 padding-right: 3rem;
314 }
315
316 .form-field input:valid:not(:placeholder-shown) + label {
317 color: #10b981;
318 }
319
320 /* Success checkmark using pseudo-element */
321 .form-field:has(input:valid:not(:placeholder-shown))::after {
322 content: '✓';
323 position: absolute;
324 right: 1rem;
325 top: 50%;
326 transform: translateY(-50%);
327 color: #10b981;
328 font-weight: bold;
329 font-size: 1.25rem;
330 animation: checkmarkPop 0.3s ease-out;
331 }
332
333 @keyframes checkmarkPop {
334 0% { transform: translateY(-50%) scale(0); }
335 50% { transform: translateY(-50%) scale(1.2); }
336 100% { transform: translateY(-50%) scale(1); }
337 }
338
339 .form-field input:invalid:not(:placeholder-shown) {
340 border-color: #ef4444;
341 animation: shake 0.4s ease-in-out;
342 }
343
344 @keyframes shake {
345 0%, 100% { transform: translateX(0); }
346 25% { transform: translateX(-5px); }
347 75% { transform: translateX(5px); }
348 }
349
350 /* =================
351 CONTENT QUANTITY AWARE GRID
352 ================= */
353 .adaptive-grid {
354 display: grid;
355 gap: 1.5rem;
356 margin: 2rem 0;
357 }
358
359 /* Single item - centered */
360 .adaptive-grid:has(.grid-card:only-child) {
361 grid-template-columns: 1fr;
362 place-items: center;
363 }
364
365 .adaptive-grid .grid-card:only-child {
366 max-width: 400px;
367 padding: 3rem 2rem;
368 text-align: center;
369 }
370
371 /* Two items - side by side */
372 .adaptive-grid:has(.grid-card:first-child:nth-last-child(2)) {
373 grid-template-columns: 1fr 1fr;
374 }
375
376 /* Three items - featured layout */
377 .adaptive-grid:has(.grid-card:first-child:nth-last-child(3)) {
378 grid-template-columns: 2fr 1fr;
379 grid-template-rows: repeat(2, 1fr);
380 }
381
382 .adaptive-grid:has(.grid-card:first-child:nth-last-child(3)) .grid-card:first-child {
383 grid-row: 1 / -1;
384 font-size: 1.25rem;
385 }
386
387 /* Four or more items - regular grid */
388 .adaptive-grid:has(.grid-card:first-child:nth-last-child(n+4)) {
389 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
390 }
391
392 .grid-card {
393 background: white;
394 padding: 2rem;
395 border-radius: 12px;
396 box-shadow: 0 4px 15px rgba(0,0,0,0.1);
397 transition: all 0.3s ease;
398 position: relative;
399 overflow: hidden;
400 }
401
402 .grid-card:hover {
403 transform: translateY(-5px);
404 box-shadow: 0 12px 25px rgba(0,0,0,0.15);
405 }
406
407 /* Card number indicator */
408 .adaptive-grid {
409 counter-reset: card-counter;
410 }
411
412 .grid-card {
413 counter-increment: card-counter;
414 }
415
416 .grid-card::before {
417 content: counter(card-counter);
418 position: absolute;
419 top: 1rem;
420 right: 1rem;
421 background: linear-gradient(135deg, #06b6d4, #3b82f6);
422 color: white;
423 width: 2rem;
424 height: 2rem;
425 border-radius: 50%;
426 display: flex;
427 align-items: center;
428 justify-content: center;
429 font-size: 0.875rem;
430 font-weight: 600;
431 }
432
433 /* =================
434 INTERACTIVE TOOLTIP SYSTEM
435 ================= */
436 .tooltip-demo {
437 display: flex;
438 gap: 2rem;
439 justify-content: center;
440 flex-wrap: wrap;
441 margin: 3rem 0;
442 }
443
444 .tooltip-trigger {
445 padding: 1rem 2rem;
446 background: white;
447 border: 2px solid #e2e8f0;
448 border-radius: 8px;
449 cursor: pointer;
450 font-weight: 600;
451 position: relative;
452 transition: all 0.3s ease;
453 }
454
455 .tooltip-trigger:hover {
456 border-color: #3b82f6;
457 transform: translateY(-2px);
458 }
459
460 /* Multi-directional tooltips */
461 .tooltip-trigger::before {
462 content: attr(data-tooltip);
463 position: absolute;
464 padding: 0.75rem 1rem;
465 background: rgba(0, 0, 0, 0.9);
466 color: white;
467 border-radius: 8px;
468 font-size: 0.875rem;
469 white-space: nowrap;
470 z-index: 1000;
471 opacity: 0;
472 visibility: hidden;
473 transform: scale(0.8);
474 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
475 }
476
477 .tooltip-trigger::after {
478 content: '';
479 position: absolute;
480 border: 6px solid transparent;
481 z-index: 999;
482 opacity: 0;
483 visibility: hidden;
484 transition: all 0.3s ease;
485 }
486
487 /* Top tooltip */
488 .tooltip-trigger:not([data-position])::before,
489 .tooltip-trigger[data-position="top"]::before {
490 bottom: calc(100% + 12px);
491 left: 50%;
492 transform: translateX(-50%) scale(0.8);
493 }
494
495 .tooltip-trigger:not([data-position])::after,
496 .tooltip-trigger[data-position="top"]::after {
497 bottom: calc(100% + 6px);
498 left: 50%;
499 transform: translateX(-50%);
500 border-top-color: rgba(0, 0, 0, 0.9);
501 }
502
503 /* Right tooltip */
504 .tooltip-trigger[data-position="right"]::before {
505 top: 50%;
506 left: calc(100% + 12px);
507 transform: translateY(-50%) scale(0.8);
508 }
509
510 .tooltip-trigger[data-position="right"]::after {
511 top: 50%;
512 left: calc(100% + 6px);
513 transform: translateY(-50%);
514 border-right-color: rgba(0, 0, 0, 0.9);
515 }
516
517 /* Show tooltips on hover */
518 .tooltip-trigger:hover::before,
519 .tooltip-trigger:hover::after {
520 opacity: 1;
521 visibility: visible;
522 }
523
524 .tooltip-trigger:hover::before {
525 transform: translateX(-50%) scale(1);
526 }
527
528 .tooltip-trigger[data-position="right"]:hover::before {
529 transform: translateY(-50%) scale(1);
530 }
531
532 /* =================
533 STEP COUNTER DEMO
534 ================= */
535 .step-process {
536 counter-reset: step-counter;
537 max-width: 600px;
538 margin: 3rem auto;
539 }
540
541 .step-item {
542 counter-increment: step-counter;
543 position: relative;
544 padding-left: 4rem;
545 margin-bottom: 2rem;
546 padding-bottom: 2rem;
547 }
548
549 .step-item::before {
550 content: counter(step-counter);
551 position: absolute;
552 left: 0;
553 top: 0;
554 width: 2.5rem;
555 height: 2.5rem;
556 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
557 color: white;
558 border-radius: 50%;
559 display: flex;
560 align-items: center;
561 justify-content: center;
562 font-weight: 600;
563 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
564 z-index: 2;
565 position: relative;
566 }
567
568 /* Connecting lines */
569 .step-item:not(:last-child)::after {
570 content: '';
571 position: absolute;
572 left: 1.25rem;
573 top: 2.5rem;
574 bottom: -2rem;
575 width: 2px;
576 background: linear-gradient(180deg, #3b82f6, #e2e8f0);
577 transform: translateX(-1px);
578 }
579
580 .step-item h4 {
581 color: #1e293b;
582 margin-bottom: 0.5rem;
583 font-size: 1.125rem;
584 }
585
586 .step-item p {
587 color: #64748b;
588 line-height: 1.6;
589 }
590
591 /* =================
592 LOADING ANIMATIONS
593 ================= */
594 .loading-showcase {
595 display: flex;
596 justify-content: space-around;
597 align-items: center;
598 padding: 3rem;
599 background: rgba(255, 255, 255, 0.1);
600 border-radius: 16px;
601 margin: 3rem 0;
602 }
603
604 /* Dual ring spinner */
605 .spinner-dual {
606 position: relative;
607 width: 40px;
608 height: 40px;
609 }
610
611 .spinner-dual::before,
612 .spinner-dual::after {
613 content: '';
614 position: absolute;
615 border-radius: 50%;
616 animation: spinDual 1s linear infinite;
617 }
618
619 .spinner-dual::before {
620 width: 100%;
621 height: 100%;
622 border: 3px solid rgba(59, 130, 246, 0.3);
623 border-top-color: #3b82f6;
624 }
625
626 .spinner-dual::after {
627 width: 60%;
628 height: 60%;
629 top: 20%;
630 left: 20%;
631 border: 2px solid rgba(139, 92, 246, 0.3);
632 border-top-color: #8b5cf6;
633 animation-duration: 0.7s;
634 animation-direction: reverse;
635 }
636
637 @keyframes spinDual {
638 to { transform: rotate(360deg); }
639 }
640
641 /* Skeleton loader */
642 .skeleton-demo {
643 width: 200px;
644 height: 20px;
645 background: #f3f4f6;
646 border-radius: 4px;
647 position: relative;
648 overflow: hidden;
649 }
650
651 .skeleton-demo::before {
652 content: '';
653 position: absolute;
654 top: 0;
655 left: -100%;
656 width: 100%;
657 height: 100%;
658 background: linear-gradient(90deg,
659 transparent,
660 rgba(255, 255, 255, 0.8),
661 transparent
662 );
663 animation: skeletonShimmer 1.5s infinite;
664 }
665
666 @keyframes skeletonShimmer {
667 0% { left: -100%; }
668 100% { left: 100%; }
669 }
670
671 /* =================
672 RESPONSIVE DESIGN
673 ================= */
674 @media (max-width: 768px) {
675 .container {
676 padding: 1rem;
677 }
678
679 .header h1 {
680 font-size: 2.5rem;
681 }
682
683 .demo-section h2::before {
684 left: -3rem;
685 width: 2rem;
686 height: 2rem;
687 font-size: 0.875rem;
688 }
689
690 .button-showcase {
691 grid-template-columns: 1fr;
692 }
693
694 .tooltip-demo {
695 flex-direction: column;
696 align-items: center;
697 }
698
699 .loading-showcase {
700 flex-direction: column;
701 gap: 2rem;
702 }
703 }
704 </style>
705</head>
706<body>
707 <div class="container">
708 <!-- Header -->
709 <header class="header">
710 <h1>Advanced Pseudo-selectors</h1>
711 <p>Explore the power of pseudo-elements and pseudo-classes for sophisticated styling and interactions</p>
712 </header>
713
714 <!-- Advanced Button Showcase -->
715 <section class="demo-section">
716 <h2>Multi-layer Button Animations</h2>
717 <p style="margin-bottom: 2rem; color: #64748b;">These buttons demonstrate complex pseudo-element animations with shimmer effects, pulse rings, and expanding backgrounds.</p>
718
719 <div class="button-showcase">
720 <button class="btn-advanced">Shimmer & Pulse</button>
721 <button class="btn-expand">Expanding Circle</button>
722 <button class="btn-advanced" style="background: linear-gradient(135deg, #10b981, #059669);">Success Variant</button>
723 </div>
724 </section>
725
726 <!-- Interactive Form Demo -->
727 <section class="demo-section">
728 <h2>Smart Form Validation</h2>
729 <p style="margin-bottom: 2rem; color: #64748b;">Form fields with animated labels, validation states, and pseudo-element feedback indicators.</p>
730
731 <div class="form-demo">
732 <div class="form-field">
733 <input type="email" placeholder=" " required>
734 <label>Email Address</label>
735 </div>
736 <div class="form-field">
737 <input type="text" placeholder=" " pattern="[A-Za-z\s]{3,}" required>
738 <label>Full Name (3+ characters)</label>
739 </div>
740 <div class="form-field">
741 <input type="tel" placeholder=" " pattern="[0-9]{10}" required>
742 <label>Phone Number (10 digits)</label>
743 </div>
744 <div class="form-field">
745 <input type="url" placeholder=" " required>
746 <label>Website URL</label>
747 </div>
748 </div>
749 </section>
750
751 <!-- Adaptive Grid Demo -->
752 <section class="demo-section">
753 <h2>Content-Aware Grid System</h2>
754 <p style="margin-bottom: 2rem; color: #64748b;">This grid automatically adapts its layout based on the number of items using advanced structural pseudo-classes.</p>
755
756 <div class="adaptive-grid">
757 <div class="grid-card">
758 <h4>Dynamic Layout</h4>
759 <p>This grid uses CSS pseudo-classes to detect item quantity and automatically adjust the layout pattern.</p>
760 </div>
761 <div class="grid-card">
762 <h4>Smart Positioning</h4>
763 <p>Each card is numbered automatically using CSS counters and positioned intelligently.</p>
764 </div>
765 <div class="grid-card">
766 <h4>Responsive Design</h4>
767 <p>The layout responds to content changes without any JavaScript logic.</p>
768 </div>
769 <!-- Try adding or removing cards to see the layout adapt -->
770 </div>
771
772 <p style="margin-top: 1rem; font-size: 0.875rem; color: #6b7280; text-align: center;">
773 <strong>Try inspecting and adding/removing cards to see the layout automatically adapt!</strong>
774 </p>
775 </section>
776
777 <!-- Interactive Tooltips -->
778 <section class="demo-section">
779 <h2>Advanced Tooltip System</h2>
780 <p style="margin-bottom: 2rem; color: #64748b;">Multi-directional tooltips with smooth animations, created entirely with CSS pseudo-elements.</p>
781
782 <div class="tooltip-demo">
783 <button class="tooltip-trigger" data-tooltip="This tooltip appears on top with a smooth bounce animation">Top Tooltip</button>
784 <button class="tooltip-trigger" data-position="right" data-tooltip="Right-positioned tooltip with scaling animation">Right Tooltip</button>
785 <button class="tooltip-trigger" data-tooltip="Hover effects include micro-interactions and smooth transitions">Hover Effects</button>
786 </div>
787 </section>
788
789 <!-- Step Process -->
790 <section class="demo-section">
791 <h2>Animated Step Process</h2>
792 <p style="margin-bottom: 2rem; color: #64748b;">A step-by-step process visualization using CSS counters and connecting lines created with pseudo-elements.</p>
793
794 <div class="step-process">
795 <div class="step-item">
796 <h4>Learn Pseudo-element Basics</h4>
797 <p>Start with ::before and ::after pseudo-elements to understand how generated content works in CSS.</p>
798 </div>
799 <div class="step-item">
800 <h4>Master Pseudo-class Selectors</h4>
801 <p>Explore structural pseudo-classes like :nth-child, :first-of-type, and state-based selectors.</p>
802 </div>
803 <div class="step-item">
804 <h4>Combine for Advanced Patterns</h4>
805 <p>Create sophisticated interactions by combining pseudo-elements with pseudo-classes and animations.</p>
806 </div>
807 <div class="step-item">
808 <h4>Build Real-world Components</h4>
809 <p>Apply these techniques to create tooltips, loading states, form validation, and interactive UI elements.</p>
810 </div>
811 </div>
812 </section>
813
814 <!-- Loading Animations -->
815 <section class="demo-section">
816 <h2>CSS-only Loading Animations</h2>
817 <p style="margin-bottom: 2rem; color: #64748b;">Advanced loading indicators created with pseudo-elements and keyframe animations.</p>
818
819 <div class="loading-showcase">
820 <div>
821 <h4 style="margin-bottom: 1rem; text-align: center;">Dual Ring Spinner</h4>
822 <div class="spinner-dual"></div>
823 </div>
824 <div>
825 <h4 style="margin-bottom: 1rem; text-align: center;">Skeleton Loader</h4>
826 <div class="skeleton-demo"></div>
827 </div>
828 </div>
829 </section>
830
831 <!-- Performance Tips -->
832 <section class="demo-section" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">
833 <h2 style="color: white;">Performance & Best Practices</h2>
834 <ul style="list-style: none; padding: 0; line-height: 1.8;">
835 <li style="margin-bottom: 0.5rem;">✓ <strong>Use pseudo-elements sparingly</strong> - Each adds to rendering complexity</li>
836 <li style="margin-bottom: 0.5rem;">✓ <strong>Prefer transform over position changes</strong> - Better animation performance</li>
837 <li style="margin-bottom: 0.5rem;">✓ <strong>Combine pseudo-classes logically</strong> - Avoid overly complex selectors</li>
838 <li style="margin-bottom: 0.5rem;">✓ <strong>Test accessibility</strong> - Ensure generated content doesn't break screen readers</li>
839 <li style="margin-bottom: 0.5rem;">✓ <strong>Optimize for mobile</strong> - Consider touch interactions and reduced motion</li>
840 </ul>
841 </section>
842 </div>
843
844 <script>
845 // Add some interactivity for demonstration
846 console.log('🎯 Advanced Pseudo-selectors loaded!');
847
848 // Example: Dynamic grid manipulation
849 const adaptiveGrid = document.querySelector('.adaptive-grid');
850 let cardCount = adaptiveGrid.querySelectorAll('.grid-card').length;
851
852 console.log(`Grid currently has ${cardCount} cards - layout will adapt automatically`);
853
854 // Add keyboard navigation for tooltips
855 document.querySelectorAll('.tooltip-trigger').forEach(trigger => {
856 trigger.addEventListener('keydown', (e) => {
857 if (e.key === 'Enter' || e.key === ' ') {
858 e.preventDefault();
859 // Pseudo-element tooltips are automatically shown on focus
860 trigger.focus();
861 }
862 });
863 });
864
865 // Demonstrate form validation feedback
866 document.querySelectorAll('input[required]').forEach(input => {
867 input.addEventListener('blur', () => {
868 if (input.validity.valid && input.value.length > 0) {
869 console.log(`✓ Field "${input.labels[0].textContent}" is valid`);
870 }
871 });
872 });
873
874 console.log('Explore all the interactive elements - hover, focus, and type in form fields!');
875 </script>
876</body>
877</html>This comprehensive demonstration showcases every advanced pseudo-element and pseudo-class technique:
🎯 Advanced Pseudo-element Mastery:
1. Multi-layer Button Animations:
2. Generated Content Systems:
3. Complex Positioning Patterns:
4. Advanced Pseudo-class Applications:
Structural Selectors for Smart Layouts:
State-based Interactive Selectors:
5. Form Validation Excellence:
Animated Label System:
Smart Validation States:
6. Content-Aware Layout Systems:
Quantity-Based Grid Adaptation:
Automatic Layout Intelligence:
7. Advanced Animation Techniques:
Keyframe Animation Patterns:
Transform-Based Interactions:
8. Performance Optimization Strategies:
Hardware Acceleration:
Efficient Selector Patterns:
9. Accessibility Integration:
Screen Reader Considerations:
Motion Preferences:
10. Real-World Application Patterns:
Component Design Systems:
Layout Intelligence:
This demonstration proves how advanced pseudo-selectors create sophisticated, performant, and maintainable user interfaces that rival JavaScript-based solutions while offering superior performance and accessibility.
Excellent mastery of advanced pseudo-elements and pseudo-classes! You can now create sophisticated selectors, generate dynamic content, and build complex interactive patterns with CSS alone. Next, we'll explore "CSS Functions & Calculations" where you'll learn to use powerful CSS functions like clamp(), min(), max(), and calc() to create responsive, flexible layouts with mathematical precision. Get ready to add computational power to your stylesheets!
Your progress is saved in this browser, on this device only.