Kevin Powell - Community•2mo ago

nesting css. what did i do wrong ?

hi all, i'm trying to toggle a edition using css. in "display mode" : i need to display labels of checked inputs (ok) in "edition mode" : i need to display everything (not ok) this only thing happening when toggleling edition, is the "switch" of the buttons modify/save here is my code https://jsfiddle.net/zn38p51s/

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

13 Replies

Mannix•2mo ago

if you don't want the button to jump to the next line use display: inline-block instead of display: block

DoksuriOP•2mo ago

it's not the button my problem (it's simplified code from my project) in "edition mode" i want to display every labels + input

Mannix•2mo ago

and if you are not in edition mode ? what should happen?

DoksuriOP•2mo ago

display only labels with checked input (that is ok)

Mannix•2mo ago

it's a specificity issue also you have .label and it should be just label

  &.edit {
    label:has(input) {
      display: block;
      input { display: block; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }

  &.edit {
    label:has(input) {
      display: block;
      input { display: block; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }

this should boost it

DoksuriOP•2mo ago

ha... oups ... this works for the checked inputs, but still cannot see others adding !important solves it... but i'm not a fan of !importants

.container {
  label {
    margin-right: 2rem;
    input {
      margin-top: 8px;
      float: left;
      display: none;
    }
    &:not(:has(input:checked)) { display: none; }
  }
  .btnModify { text-align: center; }
  .btnSave { display: none; }
  &.edit {
    label {
      display: block !important;
      input { display: block !important; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }
}

.container {
  label {
    margin-right: 2rem;
    input {
      margin-top: 8px;
      float: left;
      display: none;
    }
    &:not(:has(input:checked)) { display: none; }
  }
  .btnModify { text-align: center; }
  .btnSave { display: none; }
  &.edit {
    label {
      display: block !important;
      input { display: block !important; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }
}

IMO : using !important means i've missed something okay, i went for this solution :

.container {
  label {
    margin-right: 2rem;
    input {
      margin-top: 8px;
      float: left;
      display: none;
    }
    &:not(:has(input:checked)) { display: none; }
  }
  .btnModify { text-align: center; }
  .btnSave { display: none; }
  &.edit {
    label {
      display: block;
      input { display: block; }
      &:not(:has(input:checked)) { display: block; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }
}

.container {
  label {
    margin-right: 2rem;
    input {
      margin-top: 8px;
      float: left;
      display: none;
    }
    &:not(:has(input:checked)) { display: none; }
  }
  .btnModify { text-align: center; }
  .btnSave { display: none; }
  &.edit {
    label {
      display: block;
      input { display: block; }
      &:not(:has(input:checked)) { display: block; }
    }
    .btnSave { display: block; }
    .btnModify { display: none; }
  }
}

ἔρως•2mo ago

why are you hiding the label?

Mannix•2mo ago

if you are reffering to checked inputs in display mode you should change

    input {
      margin-top: 8px;
      float: left;
      display: none;
    }

    input {
      margin-top: 8px;
      float: left;
      display: none;
    }

    input {
      margin-top: 8px;
      float: left;
    }
    input:not(:checked) {
      display: none;
    }

    input {
      margin-top: 8px;
      float: left;
    }
    input:not(:checked) {
      display: none;
    }

ἔρως•2mo ago

im talking about this:

  label {
    // [...]
    &:not(:has(input:checked)) { display: none; }
  }

  label {
    // [...]
    &:not(:has(input:checked)) { display: none; }
  }

Mannix•2mo ago

that was meant for op sorry 🙂

ἔρως•2mo ago

DoksuriOP•2mo ago

because this is what was asked to me xD

ἔρως•2mo ago

that is ... oh, well

Gaming

Programming

nesting css. what did i do wrong ?

Did you find this page helpful?