Creating unique CSS div designs based on the nth-child selector

Question

Creating unique CSS div designs based on the nth-child selector

I have created a website layout.

https://i.stack.imgur.com/6FSEb.png

I have included the file showing the design. The data in the boxes will come from a MySQL database.

My query is, can it be done with just one query?

Currently, I am running separate queries for each set of boxes - limit 2 for the first two, then another limit for the next two, and so on. However, I am now considering if CSS could handle this by styling the first and second boxes differently, the third and fourth boxes differently, and applying an alternative style for the remaining boxes based on automatic generation.

html css

Answer 1

Answer №1

Here is an illustration to demonstrate this concept. Feel free to experiment with the provided code snippet. It has been thoroughly tested and I trust it will be beneficial for you.

HTML:

<div>example1</div>
<div>example2</div>
<div>example3</div>
<div>example4</div>
<div>example5</div>
<div>example6</div>
<div>example7</div>
<div>example8</div>
<div>example9</div>
<div>example10</div>
<div>example11</div>
<div>example12</div>

CSS:

div{
    width: 25%;
    float:left;
    border:1px solid #ccc;
    box-sizing: border-box;
    text-align:center;
}
div:nth-child(1), div:nth-child(2){
    width: 100%;
}
div:nth-child(3), div:nth-child(4){
    width: 50%;
}

Demo:

https://i.stack.imgur.com/RQ8Ru.png

Answer 2

Here is an illustration to demonstrate this concept. Feel free to experiment with the provided code snippet. It has been thoroughly tested and I trust it will be beneficial for you.

HTML:

<div>example1</div>
<div>example2</div>
<div>example3</div>
<div>example4</div>
<div>example5</div>
<div>example6</div>
<div>example7</div>
<div>example8</div>
<div>example9</div>
<div>example10</div>
<div>example11</div>
<div>example12</div>

CSS:

div{
    width: 25%;
    float:left;
    border:1px solid #ccc;
    box-sizing: border-box;
    text-align:center;
}
div:nth-child(1), div:nth-child(2){
    width: 100%;
}
div:nth-child(3), div:nth-child(4){
    width: 50%;
}

Demo:

https://i.stack.imgur.com/RQ8Ru.png

Answer 3

Answer №2

If you want to write CSS rules, make sure they are mathematically expressed.

an+b-1

Just remember, HTML/DOM cannot directly communicate with CSS without the use of JavaScript.

However, you can create intricate designs by using :nth-child() and :nth-last-child() together.

Check out MDN's :nth-Child reference for more information

If you're looking for a solution, consider something like this:

div{
    width: 25%
}
div:nth-of-type(1), div:nth-of-type(2){
    width: 100%;
}
div:nth-of-type(3), div:nth-of-type(4){
    width: 50%;
}

Answer 4

If you want to write CSS rules, make sure they are mathematically expressed.

an+b-1

Just remember, HTML/DOM cannot directly communicate with CSS without the use of JavaScript.

However, you can create intricate designs by using :nth-child() and :nth-last-child() together.

Check out MDN's :nth-Child reference for more information

If you're looking for a solution, consider something like this:

div{
    width: 25%
}
div:nth-of-type(1), div:nth-of-type(2){
    width: 100%;
}
div:nth-of-type(3), div:nth-of-type(4){
    width: 50%;
}

Creating unique CSS div designs based on the nth-child selector

Answer №1

Answer №2

Similar questions

display a container and navigate to the specific link

Error: Property 'onclick' cannot be set on a null object

Adjust the navigation menu to display or hide as the page is being scrolled

Ways to customize decoration in Material UI TextField

Dynamically created span element in script facing issues in MVC application

Incorrect rendering on mobile screen width

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

"Rearrange elements on a webpage using CSS and HTML to position one

Discover the perfect technique to employ insertString for effortlessly adding a new line onto a JEditorPane integrated with HTML functionality

The enchanting world of CSS background scrolling animations

What is the best way to position a Button on the far right of an MUI AppBar?

Position the final offspring adjacent to the one that came before it using Flexbox

transitioning from font-awesome v4 to the latest version, v5

Using " " to split a name into two lines is not being recognized

Swap out the HTML tags with JavaScript code

Fixing a CSS animation glitch when using JavaScript

Encountering an error message stating, "Unable to assign value to 'onclick' property"

Invisible Thinglink image revealed upon resizing browser

Queueing up file downloads through a web browser

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected