CSS and nth-child experimentation

Developer
Tom Durkin
Size
2,156 Kb
Views
22,264
  1. CSS and nth-child experimentation Previews
  2. CSS and nth-child experimentation HTML Codes
  3. CSS and nth-child experimentation CSS Codes
  4. CSS and nth-child experimentation JS Codes

How do I make an css and nth-child experimentation?

Some experimentation with CSS and nth-child to add a different class to a range of child DIVs. I don't know an awful lot about nth-child so have tasked myself to do some homework. Seems to be more intuative than I thought.... What is a css and nth-child experimentation? How do you make a css and nth-child experimentation? This script and codes were developed by Tom Durkin on 14 November 2022, Monday.

CSS and nth-child experimentation Previews
IQ Test

CSS and nth-child experimentation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS and nth-child experimentation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=EB+Garamond'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="clearfix"> <h1>CSS and nth-child Experimentation</h1> <div class="row range-none"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row range-24"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row range-33"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row range-33"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row range-none"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <p>Feedback welcomed via twitter - @tomdurkin</p>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS and nth-child experimentation - Script Codes CSS Codes

body { font-family: 'EB Garamond', serif;
}
#container { margin: 40px auto; padding: 0; width: 80%; max-width: 400px; text-align: center;
}
.clearfix:after { content:""; display: block; clear: both;
}
.row { margin: 0 0 2% 0;
}
.row:after { content:""; display: block; clear: both;
}
h1 { font-size: 40px; margin: 0 0 40px 0;
}
p { margin: 20px 0 0 0;
}
.box { width: 18.4%; height: 80px; background: #e1e1e1; float: left; margin: 0 2% 0 0;
}
.row .box:last-child { margin: 0 0 0 0;
}
.range-24 .box:nth-child(n+2):nth-child(-n+4) { background: #e74c3c;
}
.range-33 .box:nth-child(n+3):nth-child(-n+3) { background: #e74c3c;
}

CSS and nth-child experimentation - Script Codes JS Codes

// Feedback welcomed via twitter - @tomdurkin
CSS and nth-child experimentation - Script Codes
CSS and nth-child experimentation - Script Codes
Home Page Home
Developer Tom Durkin
Username tomdurkin
Uploaded November 14, 2022
Rating 3
Size 2,156 Kb
Views 22,264
Do you need developer help for CSS and nth-child experimentation?

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!

Tom Durkin (tomdurkin) Script Codes
Name
Jquery Template
A Pen by Tom Durkin
Shrinking Header
Pure CSS image caption with animation
Muti-level Dropdown Menu with JQuery
CSS Circles with Border Radius
A Pen by Tom Durkin
Animated CSS Buttons
JQuery Mouse Recording
Create amazing love letters with AI!

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!