What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains?

<div class="wrapper">
  <div class="element" />
</div>

or...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
</div>

or...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
  <div class="element" />
</div>

I am looking for a solution using only CSS, similar to the following:

.wrapper .element {
width: 50%;
}

.wrapper .element:only-child {
width: 75%;
}

However, I am struggling to differentiate between having 2 elements or 3 elements. Is this achievable using pure CSS?

Any help would be greatly appreciated.

htmlcssstylesheet

Answer №1

Creating a wrapper with multiple children in HTML can be achieved using the data attribute, as suggested by @david-thomas:

Here is an example of a DIV wrapper and its children:

<div class="wrapper" data-wrapper-subs="3">
    <div class="some-class">Child 1</div>
    <div class="some-class">Child 2</div>
    <div class="some-class">Child 3</div>
</div>

Corresponding CSS styles for the wrapper based on the number of children:

div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }

div.wrapper div.some-class { /* Generic child styling */ }

Ensure to set the data-wrapper-subs attribute to the correct number of children.

If the number of children is unknown, this method may not work effectively due to limited styling options available such as :first-child, :last-child, :only-child, :nth-child(odd), :nth-child(even), and :nth-child([number]).

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

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

javascriptjqueryhtmlcssload

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

css

Create a login <div> that appears to float effortlessly on the screen

Seeking assistance in creating a login div similar to the one on ups.com. Upon clicking the login button on www.ups.com, a floating login div appears. How can I generate a similar div? Any help would be greatly appreciated. Thank you. ...

htmlcss

Is it possible to place a secondary read more button next to the first one using CSS?

If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box. ...

htmlcss

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

javascriptjquerycssslider

Angular 10 is displaying a message indicating that a font has not been

I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue? style.scss: @import "~@angular/material/theming"; @include mat-core(); $PWP-primary: mat-palette($mat-indigo); $PWP-accent: ...

cssangularsassless

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing. <!DOCTYPE html> ...

htmlcssbootstrap-5

In what way can I fill out my search fields using the criteria included in the URL?

In the process of developing an asp.net web application, I have implemented a code snippet to construct a section for search fields. This code builds URL parameters based on user input: <script type="text/javascript> $(document).ready(function(){ ...

javascriptjqueryhtmlasp.net

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

javascriptjqueryhtmlcsstimer

Is it possible to conceal glyphicons by employing the attribute hidden="hidden"?

Is it possible to conceal a glyphicon icon in this manner? <i class="glyphicon glyphicon-remove-circle" title="Please add a suitable value" id="author" hidden="hidden"></i> <p>Author</p> ...

csshtmlglyphicons

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

jquerycssimagefadeoutfadein

Having trouble with jQuery hover and AJAX loaded content not functioning properly?

When I receive content through AJAX, it looks like this: <div class="message" id="1"> blah <div class="details" id="1" style="float: left; display: none;">hidden information</div> <div class="spacer" style="clear: both;"&g ...

jqueryhtmlajax

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Hey there! I've got this snippet of HTML code that I'm working with: <div class="template-page-wrapper"> <div class="templemo-content-wrapper"> <div class="templatemo-content"> <div c ...

htmlcss

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml

What is the best way to choose the initial element in every group using jQuery?

If we have the following HTML input: <p>A</p> <p>B</p> <p>C</p> <div>D</div> <p>E</p> <p>F</p> <p>G</p> We can select B, C, F and G using the following code: $('p + ...

javascriptjqueryhtml

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components