Choose the first and last div element in the selection

Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes?

.main{
  width:460px;
  height:240px;
}
.box{
  width:100px;
  height:100px;
  background:red;
  float:left;
  margin:10px;
}

/*I tried */

.box:nth-child(n+4),.box:first-child{
  margin:10px 10px 10px 0;
}

.box:nth-child(4n){
  margin:10px 0px 10px 10px;
}
<div class="main">
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
</div>

The second code seems to be working fine, however I am encountering difficulties with the first one.

How can I style every first and last div within each row, where each row consists of four divs?

JSFiddle.

htmlcsscss-selectors

Answer №1

Give this a shot:

.box:nth-child(4n+1)

This will select the first element (+1) and then every fourth one after that (4n).

Answer №2

Click here for JSFIDDLE

Selecting elements with 4n will choose numbers in a sequence like 4, 8, 12, etc.

Choosing elements with 4n+1 will result in numbers such as 1, 5, 9, 13, and so on.

A formula is used to determine this pattern: (an + b). Here, 'a' represents the cycle size, 'n' is a counter starting at 0, and 'b' serves as an offset value.

.box:nth-child(4n){
    margin:10px 0px 10px 10px;
}

.box:nth-child(4n+1){
   margin:10px 10px 10px 0;
}

Answer №4

Give this a shot:

http://jsfiddle.net/cJwVc/

.box:nth-child(4n+1){
   background-color:yellow;
   margin-left:0;
}

.box:nth-child(4n){
   background-color:blue;
    margin-right:0;
}

Answer №5

For those requiring compatibility with IE8 or earlier versions, it is necessary to incorporate the selector in Jquery. Here's a demonstration:

$('.box:nth-child(4n+1)').css('background-color', 'yellow');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the image height in a column using Bootstrap and JSON data

My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...

javascripthtmljquerycssbootstrap-5

Tips for resolving the issue of cypress automatically opening a new tab

Recently, I've encountered an issue while using Cypress to perform a test on my website. Every time I click on a button, it redirects me to a new tab, disrupting the flow of my test with Cypress. Despite trying to remove the "target" attribute using t ...

javascripthtmlattributescypress

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

Exploring the beauty of ASCII art on a webpage

Having trouble displaying ASCII art on my website using a JavaScript function, the output is not as expected... This is how it should appear: And here is the code I am trying to implement for this purpose: function log( text ) { $log = $('#log&ap ...

javascripthtmlascii-art

Exploration of features through leaflet interaction

Attempting to plot bus routes on a map using leaflet with geojson for coordinates. Facing issues with making the bus line bold when clicked, and reverting the style of previously clicked features back to default. Current Progress function $onEachFeature( ...

javascriptjquerycssleafletgeojson

What is the proper way to apply a background color to the entire body using CSS?

I'm facing an issue with getting the background color to cover the entire body of my webpage. Currently, it only captures a certain size and when there is scrolling on the window, two shades of colors appear. I want the background color to span the en ...

htmlcssangular

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

How can I retrieve information from an HTML or JavaScript object?

Imagine a scenario where you have an HTML table consisting of 5,000 rows and 50 columns, all generated from a JavaScript object. Now, suppose you want to send 50 checked rows (checkbox) from the client to the server using HTTP in JSON format. The question ...

javascriptjqueryhtmljsonhttp

What could be causing the dysfunction of the jQuery class adding function?

I'm new to using jQuery and I'm trying to add a class to the 'a' tag when the 'li' tag is clicked. However, it doesn't seem to be working as expected. $('.nav-item').click( function() { $(".nav-item a").re ...

javascripthtmljquery

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pixels based only on my browser). ...

htmlcsscss-shapes

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

css

What's the reason behind the absence of applied bootstrap style in jsFiddle?

Link to the code: Click here I'm having trouble understanding why the default style of <ol> from Bootstrap is not being applied in this particular code. Any insights? Here's a snippet of the HTML code taken from the fiddle. <ul> ...

csstwitter-bootstrap

Obtaining the Author's ID on Blogger

Is there a way to extract the author's ID on Google's blogger.com platform? I'm familiar with how to obtain the post ID using data:post.id, but what about the author's ID? ...

htmlcsswordpressblogsblogger

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

javascripthtmlaurelia

Styling buttons with CSS in the Bootstrap framework

I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...

cssbuttontwitter-bootstraphover

Is there a way to turn off step navigation in bootstrap?

Displayed below is a visual representation of the bootstrap step navigation component. Presently, there is an unseen 'next' button located at the bottom of the page. When this 'next' button is pressed, it transitions from 'step-1 ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to effectively use graph paper with both major and minor grids in the background?

Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...

htmlcsssvgbackground

Determine the height using jQuery before adding the class

I've been grappling with jQuery to accurately calculate the height of an element and then apply a specific CSS class to adjust its height. The issue I'm facing is that jQuery seems to be executing these calculations out of order, which is causing ...

jquerycss

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

javascriptjqueryhtmlajaxjson

Numerous criteria for selecting a checkbox

I am working with a student database table called student_db, which looks like this: Name Gender Grade City John Male 2 North Dave Male 4 North Garry Male 3 North Chirsty Female 5 East Monica Female 4 East Andrew Male ...

javascriptphpjquerymysqlhtml