Tips for utilizing the nth-child selector to exclude hidden divs

I am facing an issue with displaying random blocks in rows. Each time a block falls into a new row, I want it to have a different style. However, when the user clicks on a button to hide certain blocks using display:none, the problem arises because the nth-child selector still applies to hidden elements as well.

Is there a way to exclude those specific blocks from being styled, so that each row maintains a unique look? The provided code snippet demonstrates a similar scenario.

$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})
.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    .board-item:nth-child(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  .board-item:nth-child(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  .board-item:nth-child(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide others</button>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">1</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">2</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">3</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">4</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">5</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">6</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">7</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">8</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">9</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">0</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">10</div>
        </div>
    </div>
    <div>

To understand my question better, please refer to the provided code snippet or visit this EXTERNAL FIDDLE.

I am seeking a CSS-only solution for this issue. Please include a fiddle link in your response! It is crucial to note that I cannot permanently remove these blocks, as the user needs the option to filter them via button click, resulting in scenarios where some blocks are hidden and shown.

javascriptjqueryhtmlcsscss-selectors

Answer №1

Whenever a user interacts with a button, I am able to hide certain blocks using the CSS property display:none, but this action leads to a specific issue. The problem arises from the fact that even hidden elements are considered by the nth-child selector when applying styles.

Is there a way to exclude these particular hidden blocks so that each row maintains its unique styling?

The root of the issue lies in how the nth-child() selector functions by analyzing all siblings within the same parent container irrespective of their visibility status. Even though you set display: none, the element still exists within the DOM as a sibling according to CSS rules.

Referencing the CSS Selectors Level 3 specification:

6.6.5.2. :nth-child() pseudo-class

The notation :nth-child(an+b) denotes an element that has precisely an+b-1 preceding siblings in the document hierarchy, for any positive integer or zero value of n, and shares a common parent element. (emphasis mine)

To ensure that your defined nth-child rules continue to function accurately after hiding divs triggered by user actions, it is necessary to physically remove the hidden divs from the DOM structure, thereby eliminating their presence as siblings.

Your initial request seeks a pure CSS solution; however, there is flexibility indicated in potential HTML modifications as well as minimal jQuery usage for element hiding.

A straightforward line appended to your existing jQuery logic can effectively resolve the challenge:

$('.hidden').remove();

The .remove() method removes designated elements (alongside descendants) from the DOM. Specifically, in this instance, all elements marked with the class hidden are removed.

CORRECTION

An inherent flaw with remove() emerges concerning the irrevocable elimination of elements from the DOM, thus posing complications for toggling functionality.

Thankfully, an alternative provision within jQuery comes into play: detach().

In essence, the .detach() method operates similarly to .remove(), yet manages to retain all pertinent jQuery-related data associated with the detached elements. This feature proves invaluable for scenarios where formerly detached elements require reinsertion into the DOM at a later stage.

Presented below is a revised code snippet...

var divs;

$('.photos-board-item').each(function(i){
    $(this).data('initial-index', i);
});

$('.hide-others').on('click', function () {
    if(divs) {
        $(divs).appendTo('.row').each(function(){
            var oldIndex = $(this).data('initial-index');
            $('.photos-board-item').eq(oldIndex).before(this);
        });
        divs = null;
    } else {
        divs = $('.css--all-photo').detach();
    }
});

...showcasing a functional grid layout post-implementation. (credit: @JosephMarikle)

DEMO

By employing this revised approach, the grid retains its intended appearance notwithstanding hidden elements, ensuring seamless toggling without disrupting visual coherence due to the recalibrated behavior of the nth-child selector focusing solely on "visible" siblings. No CSS adjustments required. No alterations to the HTML markup.

Answer №2

To achieve this, you can utilize a combination of the :nth-of-type selector and slightly modify your toggle function.

The concept is not to remove the .css--all-photo elements from the DOM but instead wrap them within <hidden> containers. When needed, you can use unwrap() to restore the full set. By doing so, the :nth-of-type will essentially replicate what was done with the :nth-child.

var state = false;

$('.hide-others').click(function () {
    if( !state ) {
      $('.css--all-photo').wrap('<hidden>');
      state = true;
    } else {
      $('hidden').unwrap();
      state = false;
    }
})
hidden { display:none; }

.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    div.board-item:nth-of-type(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  div.board-item:nth-of-type(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  div.board-item:nth-of-type(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide others</button>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">1</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">2</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">3</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">4</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">5</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">6</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">7</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">8</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">9</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">0</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">10</div>
        </div>
    </div>
    <div>

Answer №3

If you are searching for a way to target the nth-of-class, unfortunately that specific selector does not currently exist. When using JavaScript to toggle between hidden and shown classes, the main difference lies in the visibility state of the children elements. To manipulate the style of divs with a certain class (let's say "shown"), you will have to instruct CSS to count these specific elements. However, it is worth noting that the css nth-child selector doesn't prioritize classes when selecting child elements. For more information on this topic, you can visit here.

Answer №4

For illustration purposes, here is a sample of what I am referring to: https://example.com In this instance, it will disregard elements with the specified class .hidden-element... however, you can select any class you wish to exclude.

$('.toggle-display').click(function () {
    $('.element-x').not('.hidden-element').toggleClass('hidden');
})

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

Extract information from a page that must navigate through an initial webpage

Looking to scrape a webpage that requires user input and clicks to access. Without this process, attempting to reach the page via URL will result in a 404 error. The necessary input is: The SSL certificate on the page is invalid, so verification had to b ...

pythonhtmlweb-scrapingbeautifulsouppython-requests

Can you explain the functionality of the const handleChange = (prop) => (event) => {} function and its significance?

While going through the documentation for MUI, I stumbled upon a new syntax for arrow functions in JavaScript that I haven't seen before. I tried to figure out how it works but couldn't find any information on it. The syntax looks like this: con ...

javascriptnode.jsreactjsfunctionmern

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions. Code Snippet: <div class="carousel- ...

jqueryhtmlcsstwitter-bootstrapflexslider

Error: The term "OrbitControls" is not recognized in the three

When attempting to import OrbitControls.js, I encounter the following issue: The error message Cannot use import statement outside a module is displayed. To resolve this, I add: <script type="module" src="OrbitControls.js">< ...

javascriptthree.js

Injecting a PHP file into a div upon clicking the submit button, all the while already submitting data

Hello there, I have a question regarding submitting a form and loading a relevant PHP file into a target div using the same submit button. I have attempted to do this but need some help. <form id='myForm' method="POST" action="processForm.php ...

phpjqueryhtml

Leverage slot-specific information within the component's script in Vue

In my Vue project, I faced an issue where Component A has a slot that passes an object as slot-scoped to Component B: Template of Component A: <template> <div> <slot :myObject="myObject" /> </div> </template> Template of ...

javascriptvue.js

retrieve information instantly on AngularJS by utilizing $http or $resource

I designed a plugin for field customization. angular.module('ersProfileForm').directive('ersProfileEditableField', ['$templateCache', '$compile', 'profileFieldService', 'RolesService', ...

javascriptangularjs

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Updating Twitter Bootstrap Tooltip content when clicked

Is it possible to update the content of a tooltip on an anchor element that triggers an AJAX request when clicked? The element is equipped with a Bootstrap tooltip, and I need the tooltip content to be modified once the AJAX response is received. What ar ...

jquerytwitter-bootstraptooltip

Unable to select a div element with a specific attribute using nth-child in CSS

I have encountered some outdated legacy blog code and am currently attempting to isolate the first div element with the attribute of "text-align: left". Below is a simplified example of the code snippet I am dealing with: <div class="et_pb_module e ...

css

Is it possible to modify the background color of a checkbox?

I am looking to modify the background color of the checkbox itself, specifically the white square. I have spent a lot of time researching this topic but most articles suggest creating a div and changing its background color, which does not affect the whi ...

jqueryhtmljquery-uicssjquery-plugins

What is the method to extract a value from the $emit payload using Vue.js?

I have a situation where I am sending an event with different values from my ConversationList component (child) to the ConversationModel component (parent). Conversation List getConversation(conversation_id, receiver_id, username, avatar){ this.$emit(& ...

javascriptvue.jsvuejs2vue-component

Differences in behavior across operating systems when pasting content copied from Excel into Next.js

Exploring the Issue I am currently working on a project using Next.js 14 where users can paste data copied from an Excel file into a spreadsheet-like component called react-data-grid. However, I have encountered some inconsistencies when copy-pasting on M ...

javascriptexcelwindowsmacosnext.js

How can I create an admin layout overlay in AngularJS?

Hi there, I have a question regarding using angularJS in an application we are currently developing at work. We need to implement an "overlay" admin style panel. For example, refer to this image: In the first scenario, the URL is "myapp.com/#/works". To ...

javascriptangularjs

How can AngularJS service methods be assigned to controller $scope for use in an ng-repeat loop in the view?

As part of my development process, I decided to refactor my controller code in order to make it more reusable across multiple controllers. The original version of the controller (colorController.js) worked perfectly fine before I attempted to refactor it i ...

javascriptangularjsangularjs-scopeangular-servicesangular-controller

Using the createElement method in React to restart a GIF animation

In my React project, I'm attempting to develop a function that generates a new element displaying a gif for one loop before removing it. My current approach looks like this: function playGif() { var gif = document.createElement('img') ...

javascripthtmlcssreactjs

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

htmlangulartypescript

Using discord.js within an HTML environment can add a whole new level of

I'm in the process of creating a dashboard for discord.js, however, I am facing difficulties using the discord.js library and connecting it to the client. Below is my JavaScript code (The project utilizes node.js with express for sending an HTML file ...

javascripthtmlnode.jsdiscord.js

Placing an eye icon on the password input field for optimal visibility and positioning

I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field: <div class="container"> <form ...

javascripthtmlcssbootstrap-4