Question 44551 in Html Question posted in
Some basic documentation can be found here.

CSS child selector that don't count some div at all – Html

I just have some child div with a some class, in this case .element. And first one with some other class, in this case .skip. I need to don’t count that element, like it doesn’t exist. So if i take every odd div with .element class to take same divs even if .skip div is there or deleted. If it possible with some css selector like you can with .nth-of-type if that .skip element isn’t a div, or somehow just with css to make it hidden to nth selector.

It’s important not to use javascript.

<div>
<div class="skip">no</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
Tags:

3

Answers


  1. 0

    simply ignore the skip div and take only odd values of element divs like so:

    div.element:nth-child(odd){
  background-color: black;
  color: white;
}

    https://codepen.io/ibrahim-abboud/pen/JjaNVPR

    Login or Signup to reply.
  2. 0

    If you can use different HTML tags for the elements mentioned, you could still define a nth-of-child selector. For instance, adding strikethrough to all odd elements with element class

    div.element:nth-of-type(odd) {
  text-decoration: line-through;
}
    <div>
  <span class="skip">no</span>
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
</div>
    Login or Signup to reply.
  3. 0

    You can try this. It reads the following way: "If there is a .element element that’s preceded by a .skip element, when the .element element is in an even position do whatever css rules establish". You will need to switch selections -> odd becomes even and even becomes odd (in your case, odd numbers are in even positions). I’ve added a color change to make it obvious. Switching it to odd will select 2,4,6 etc.

    .skip ~ .element:nth-of-type(even) {
  color: red;
}
    <div>
<div class="skip">no</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search