When choosing a category and the initial three choices, the nth-child and nth-of-type selectors become irrelevant

Question

When choosing a category and the initial three choices, the nth-child and nth-of-type selectors become irrelevant

Within the DOM element #installations, there are multiple children elements, with only one having a class of .selected. My goal is to select this element along with the first 3 remaining elements that do not have the class .selected in order to display only 4 elements total.

The challenge lies in the following expression:

#installations > *:not(.selected):nth-of-type(-n+3), .selected

The issue is that :nth-of-type() ignores the :not() selector and simply selects the first 3 children of #installation. For example, if the HTML looks like this:

<div id="installations">
    <div id="one"/>
    <div id="two"/>
    <div id="three" class="selected"/>
    <div id="four"/>
    <div id="five"/>
</div>

Only "one", "two", and "four" will be selected, excluding "three". This happens because :nth-of-type() has limited options due to the exclusion of the selected element by :not(), resulting in (one, two, four) being chosen. The later part of the selector , .selected then includes the selected element.

If the .selected element is not among the first four elements but instead, let's say, the sixth element, the selection would consist of the first three elements plus the sixth.

To clarify: it is acceptable to select the .selected element along with 3 adjacent elements. However, this also poses difficulties when the .selected element is within the last 3 elements as selecting the next 3 becomes problematic.

html css css-selectors

Answer 1

Answer №1

In my reply, I explained that pseudo-classes are not processed in order; they are all evaluated simultaneously on each element. You can find more information in this detailed answer.

After some experimentation with your HTML and the criteria for selecting elements, I devised a rather lengthy list of selectors:

/* The first three children will always be selected at a minimum */
#installations > div:nth-child(-n+3),
/* Select .selected if it's not among the first three children */
#installations > div.selected,
/* If .selected is among the first three children, select the fourth */
#installations > div.selected:nth-child(-n+3) ~ div:nth-child(4)

To make this work, one key assumption needs to be made: the selected class will only be applied to a single element at a time.

You must combine all three selectors within the same rule to target the four desired elements. Pay attention to the commas in the code snippet.

Try out an interactive jsFiddle demo (to test the selector with the class in various child elements)

If possible, leveraging JavaScript might provide a simpler solution. For instance, using jQuery and its :lt() selector can streamline things:

// Use this selector to apply styles instead: #installations > div.with-jquery
$('#installations')
    .children('div.selected, div:not(.selected):lt(3)')
    .addClass('with-jquery');

Check out an interactive jsFiddle demo (disregard the JS code in the demo; it's just for interactivity purposes)

Answer 2

In my reply, I explained that pseudo-classes are not processed in order; they are all evaluated simultaneously on each element. You can find more information in this detailed answer.

After some experimentation with your HTML and the criteria for selecting elements, I devised a rather lengthy list of selectors:

/* The first three children will always be selected at a minimum */
#installations > div:nth-child(-n+3),
/* Select .selected if it's not among the first three children */
#installations > div.selected,
/* If .selected is among the first three children, select the fourth */
#installations > div.selected:nth-child(-n+3) ~ div:nth-child(4)

To make this work, one key assumption needs to be made: the selected class will only be applied to a single element at a time.

You must combine all three selectors within the same rule to target the four desired elements. Pay attention to the commas in the code snippet.

Try out an interactive jsFiddle demo (to test the selector with the class in various child elements)

If possible, leveraging JavaScript might provide a simpler solution. For instance, using jQuery and its :lt() selector can streamline things:

// Use this selector to apply styles instead: #installations > div.with-jquery
$('#installations')
    .children('div.selected, div:not(.selected):lt(3)')
    .addClass('with-jquery');

Check out an interactive jsFiddle demo (disregard the JS code in the demo; it's just for interactivity purposes)

Answer 3

Answer №2

If you want to display only specific adjacent sibling items, you can make use of adjacent sibling selectors. Here is a sample code snippet that demonstrates this technique and works well in Safari (although it has not been tested on other browsers). In this example, only the 'Two', 'Three', and 'Four' items will be visible.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .the-list li {display:none;}
      .the-list li.selected {display:block;}
      .the-list li.selected + li {display:block;}
      .the-list li.selected + li + li {display:block;}
    </style>
  </head>
  <body>
    <ol class='the-list'>
      <li>One</li>
      <li class='selected'>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
  </body>
</html>

Answer 4

If you want to display only specific adjacent sibling items, you can make use of adjacent sibling selectors. Here is a sample code snippet that demonstrates this technique and works well in Safari (although it has not been tested on other browsers). In this example, only the 'Two', 'Three', and 'Four' items will be visible.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .the-list li {display:none;}
      .the-list li.selected {display:block;}
      .the-list li.selected + li {display:block;}
      .the-list li.selected + li + li {display:block;}
    </style>
  </head>
  <body>
    <ol class='the-list'>
      <li>One</li>
      <li class='selected'>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
  </body>
</html>

When choosing a category and the initial three choices, the nth-child and nth-of-type selectors become irrelevant

Answer №1

Answer №2

Similar questions

Contrasting one-finger scrolling versus dual-finger scrolling on a touch device with IE11

Tips for maintaining the footer at the bottom of the page regardless of the screen size

CSS code influencing unintended elements

Shifting Transition for Customer Reviews

Maintaining Flexbox layout without triggering item re-rendering for a new container

The navigation bar does not show any items

I seem to be having trouble with my dropdown menu, can anyone help me figure out what I might be doing wrong

Employ jQuery to set values for hidden input elements

Application of stroke-linecap in SVG limited to single end only

Flipping over every single card, but only desire to flip them one at a time

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Update the background color of an li element upon clicking

What is the best way to highlight the active link in my sidebar navigation bar when using material design in an Angular application?

Use jQuery to swap out images and witness the image loading in real time

Imitating the Frameset Separator's Actions

Bespoke media queries spanning the entire application

A guide on using Beautiful Soup to retrieve all text elements from a specific class

Navigate through HTML checkboxes using jQuery

How come the HTML content stored in a Mongodb document in JSON format is showing up as plain text on the webpage?

When running a local server with Node.js, the file index.js cannot be found if it is located one folder above the