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

Removing jQuery error label from an HTML block

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

Double tap on the YouTube video

Proper handling of retrieving POST method data on the current page

Tips for inserting the <style> element within a Vue.js component

What is the best way to customize the appearance of a non-current month cell within the date picker?

Leverage jQuery to retrieve information and fill in an HTML form

What is preventing my video from filling the entire screen?

Can HTML be rendered within classes?

The foundation grid system is experiencing difficulties when implemented on an Angular form

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

A Complication Arises with Browser Functionality When Embedding an Iframe within

Implementing a backdrop while content is floating

What is the best way to organize table rows into a single column when the window is resized?

Can the server-side manipulate the browser's address bar?

My CSS nesting seems to be posing a problem - any idea what

The navigation area is too small for the social media buttons to fit

Problem with displaying Django input fieldsSolution for missing Django input

The structure of the figure tag for HTML5 validation

Struggling to grasp the concept of Vue3 style binding