Showing a dynamic number of elements based on the value of a CSS variable can be achieved by manipulating

Question

Showing a dynamic number of elements based on the value of a CSS variable can be achieved by manipulating

Within my code, I have a CSS variable called --num that holds a numerical value.

Under the same parent, I have N HTML elements as children. Element n and element n+1 are neighboring siblings. Essentially, all N elements are adjacent to each other.

Is there a way for me to only display element n from this collection of elements if n is less than the value stored in --num?

I've attempted referencing CSS variables in selectors like :nth-child( var(--num)), but it seems that can only be done within styles.

While one option could involve using JavaScript to retrieve --num and loop through the elements, adjusting their display property, I'm curious if there might be a more elegant solution. Are there any clever CSS tricks available that could achieve similar functionality without needing JavaScript?

css css-variables

Answer 1

Answer №1

I found @Vals' answer intriguing, so here is an alternative approach focusing on height/width:

.elem {
  display: inline-block;
  max-height: 60px;
  max-width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}
.test {
  border:1px solid;
  display:inline-block;
  padding:20px;
}
.test:hover .elem {
  --number: 6;
}

.elem:nth-child(1) {
  height: calc(100px * (var(--number)));
  width: calc(100px * (var(--number)))
}

.elem:nth-child(2) {
  height: calc(100px * (var(--number) - 1));
  width: calc(100px * (var(--number) - 1))
}

.elem:nth-child(3) {
  height: calc(100px * (var(--number) - 2));
  width: calc(100px * (var(--number) - 2))
}

.elem:nth-child(4) {
  height: calc(100px * (var(--number) - 3));
  width: calc(100px * (var(--number) - 3))
}
.elem:nth-child(5) {
 height: calc(100px * (var(--number) - 4));
  width: calc(100px * (var(--number) - 4))
}
.elem:nth-child(6) {
  height: calc(100px * (var(--number) - 5));
  width: calc(100px * (var(--number) - 5))
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>

Answer 2

I found @Vals' answer intriguing, so here is an alternative approach focusing on height/width:

.elem {
  display: inline-block;
  max-height: 60px;
  max-width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}
.test {
  border:1px solid;
  display:inline-block;
  padding:20px;
}
.test:hover .elem {
  --number: 6;
}

.elem:nth-child(1) {
  height: calc(100px * (var(--number)));
  width: calc(100px * (var(--number)))
}

.elem:nth-child(2) {
  height: calc(100px * (var(--number) - 1));
  width: calc(100px * (var(--number) - 1))
}

.elem:nth-child(3) {
  height: calc(100px * (var(--number) - 2));
  width: calc(100px * (var(--number) - 2))
}

.elem:nth-child(4) {
  height: calc(100px * (var(--number) - 3));
  width: calc(100px * (var(--number) - 3))
}
.elem:nth-child(5) {
 height: calc(100px * (var(--number) - 4));
  width: calc(100px * (var(--number) - 4))
}
.elem:nth-child(6) {
  height: calc(100px * (var(--number) - 5));
  width: calc(100px * (var(--number) - 5))
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>

Answer 3

Answer №2

Just for fun and not necessarily practical...

An interesting way to adjust opacity using a variable in your request

.elem {
  margin: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}

.test:hover .elem {
  --number: 5;
}

.elem:nth-child(1) {
  opacity: calc(var(--number));
}

.elem:nth-child(2) {
  opacity: calc(var(--number) - 1);
}

.elem:nth-child(3) {
  opacity: calc(var(--number) - 2);
}

.elem:nth-child(4) {
  opacity: calc(var(--number) - 3);
}
.elem:nth-child(5) {
  opacity: calc(var(--number) - 4);
}
.elem:nth-child(6) {
  opacity: calc(var(--number) - 5);
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>

Answer 4

Just for fun and not necessarily practical...

An interesting way to adjust opacity using a variable in your request

.elem {
  margin: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}

.test:hover .elem {
  --number: 5;
}

.elem:nth-child(1) {
  opacity: calc(var(--number));
}

.elem:nth-child(2) {
  opacity: calc(var(--number) - 1);
}

.elem:nth-child(3) {
  opacity: calc(var(--number) - 2);
}

.elem:nth-child(4) {
  opacity: calc(var(--number) - 3);
}
.elem:nth-child(5) {
  opacity: calc(var(--number) - 4);
}
.elem:nth-child(6) {
  opacity: calc(var(--number) - 5);
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>

Showing a dynamic number of elements based on the value of a CSS variable can be achieved by manipulating

Answer №1

Answer №2

Similar questions

In CSS3, what is the significance of placing a comma between transition and transform?

Displaying Hierarchical Data with AngularJS and ng-repeat

Navigational Scroll Parallax Issues

What is the best way to assign a data attribute value based on an element's index using jQuery?

The HTML component fails to acknowledge width settings

Firefox's Sneaky Scrollbars

Adjust the positioning of individual navigation items to the right using Bootstrap 5

placing a see-through overlay onto a text-filled div

Align content to the bottom using Bootstrap 4

Tips on halting the current animation and modifying styles upon hovering

When the page is resized, the Font-Awesome icons shift position

Prevent styling on a fixed header in Jquery Mobile

Can you explain the distinction between using single and double quotes in my JavaScript and CSS code?

What is the method that Google uses to automatically load the footer at the bottom of the web page?

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Tips for adjusting column spacing in HighCharts

What is the best way to incorporate a button for toggling CSS animations?

Persist with displaying and concealing divs as we navigate through different pages

What is the best way to assign a CSS class to the jqGrid height property when using setGridHeight?

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?