CSS Middle Child Selector
How do I make an css middle child selector?
CSS technique for selecting the middle child of a list of elements. What is a css middle child selector? How do you make a css middle child selector? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.
CSS Middle Child Selector - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Middle Child Selector</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Select Middle Element</h1>
<p><strong>Objective:</strong> Select the middle element in a list of variable length</p>
<div> <h2>Odd Count</h2> <ul class="middle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
</div>
<div class="even"> <h2>Even Count</h2> <strong>Before:</strong> <ul class="middle before"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <!--<li>7</li> --> </ul> <strong>After:</strong> <ul class="middle after"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <!--<li>7</li> --> </ul> <strong>Both:</strong> <ul class="middle both"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <!--<li>7</li> --> </ul>
</div>
<h1>Select Elements in Second Half</h1>
<p><strong>Objective:</strong> Select only the second half of a list</p>
<ul class="half"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li>
</ul>
</body>
</html>
CSS Middle Child Selector - Script Codes CSS Codes
.middle > *:nth-child(1):nth-last-child(1)::before, .middle > *:nth-child(2):nth-last-child(2)::before, .middle > *:nth-child(3):nth-last-child(3)::before, .middle > *:nth-child(4):nth-last-child(4)::before, .middle > *:nth-child(5):nth-last-child(5)::before, .middle.before > *:nth-child(1):nth-last-child(1)::before, .middle.before > *:nth-child(1):nth-last-child(2)::before, .middle.before > *:nth-child(2):nth-last-child(2)::before, .middle.before > *:nth-child(2):nth-last-child(3)::before, .middle.before > *:nth-child(3):nth-last-child(3)::before, .middle.before > *:nth-child(3):nth-last-child(4)::before, .middle.before > *:nth-child(4):nth-last-child(4)::before, .middle.before > *:nth-child(4):nth-last-child(5)::before, .middle.before > *:nth-child(5):nth-last-child(5)::before, .middle.before > *:nth-child(5):nth-last-child(6)::before, .middle.after > *:nth-child(1):nth-last-child(1)::before, .middle.after > *:nth-child(1):nth-last-child(0)::before, .middle.after > *:nth-child(2):nth-last-child(2)::before, .middle.after > *:nth-child(2):nth-last-child(1)::before, .middle.after > *:nth-child(3):nth-last-child(3)::before, .middle.after > *:nth-child(3):nth-last-child(2)::before, .middle.after > *:nth-child(4):nth-last-child(4)::before, .middle.after > *:nth-child(4):nth-last-child(3)::before, .middle.after > *:nth-child(5):nth-last-child(5)::before, .middle.after > *:nth-child(5):nth-last-child(4)::before, .middle.both > *:nth-child(1):nth-last-child(1)::before, .middle.both > *:nth-child(1):nth-last-child(0)::before, .middle.both > *:nth-child(1):nth-last-child(2)::before, .middle.both > *:nth-child(2):nth-last-child(2)::before, .middle.both > *:nth-child(2):nth-last-child(1)::before, .middle.both > *:nth-child(2):nth-last-child(3)::before, .middle.both > *:nth-child(3):nth-last-child(3)::before, .middle.both > *:nth-child(3):nth-last-child(2)::before, .middle.both > *:nth-child(3):nth-last-child(4)::before, .middle.both > *:nth-child(4):nth-last-child(4)::before, .middle.both > *:nth-child(4):nth-last-child(3)::before, .middle.both > *:nth-child(4):nth-last-child(5)::before, .middle.both > *:nth-child(5):nth-last-child(5)::before, .middle.both > *:nth-child(5):nth-last-child(4)::before, .middle.both > *:nth-child(5):nth-last-child(6)::before, .half > *:nth-child(1):nth-last-child(1)::after, .half > *:nth-child(1):nth-last-child(1) ~ *::after, .half > *:nth-child(1):nth-last-child(0)::after, .half > *:nth-child(1):nth-last-child(0) ~ *::after, .half > *:nth-child(2):nth-last-child(2)::after, .half > *:nth-child(2):nth-last-child(2) ~ *::after, .half > *:nth-child(2):nth-last-child(1)::after, .half > *:nth-child(2):nth-last-child(1) ~ *::after, .half > *:nth-child(3):nth-last-child(3)::after, .half > *:nth-child(3):nth-last-child(3) ~ *::after, .half > *:nth-child(3):nth-last-child(2)::after, .half > *:nth-child(3):nth-last-child(2) ~ *::after, .half > *:nth-child(4):nth-last-child(4)::after, .half > *:nth-child(4):nth-last-child(4) ~ *::after, .half > *:nth-child(4):nth-last-child(3)::after, .half > *:nth-child(4):nth-last-child(3) ~ *::after, .half > *:nth-child(5):nth-last-child(5)::after, .half > *:nth-child(5):nth-last-child(5) ~ *::after, .half > *:nth-child(5):nth-last-child(4)::after, .half > *:nth-child(5):nth-last-child(4) ~ *::after, .half > *:nth-child(6):nth-last-child(6)::after, .half > *:nth-child(6):nth-last-child(6) ~ *::after, .half > *:nth-child(6):nth-last-child(5)::after, .half > *:nth-child(6):nth-last-child(5) ~ *::after { content: ''; position: absolute; border: 2px solid red; border-radius: 99in; width: 1.5em; height: 1.5em; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.even strong { display: inline-block; width: 5em;
}
.even .middle { display: inline;
}
.even .middle::after { content: '\A0'; display: block;
}
body { padding: 1em;
}
ul { list-style: none; padding: 0;
}
li { display: inline-block; margin-right: 1em; position: relative;
}
:root { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;
}
:root > * { margin: auto;
}
Developer | Joey Hoer |
Username | joeyhoer |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 3,337 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Mirrored Background | 3,114 Kb |
Shift | 5,797 Kb |
Fluid Hexagonal Grid | 4,453 Kb |
Responsive Text with Viewport Units | 65,818 Kb |
Outer Stroke | 5,119 Kb |
Flexible Rounded Hexagons | 3,463 Kb |
SVG Faux-Conical Gradient | 6,531 Kb |
Fighting the Space | 2,677 Kb |
3D Text | 3,862 Kb |
Example SVGZ Data URI | 2,981 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Promodoro | Bencarp | 1,712 Kb |
Lightrays v2 | Sinthetyc | 2,903 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Improve | Gavra | 1,652 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!