Czym się różni selektor klasy od selektora atrybutu?

Czemu jak mam taką składnie w LESS:

.parent {
  > div {
    color: green;

    &.class-in-div {
      color: yellow;
  }
}

to selektor &.class-in-div działa ok

I jeśli mam taką składnie &[class="class-in-div"] to z kolei ten selektor już nie zadziała:

.parent {
  > div {
    color: green;

    &[class="class-in-div"] {
      color: yellow;
  }
}

Jak zrobić żeby ten selektor zaczął działać w tym drugim przypadku, czy robie coś nie tak ? ? Chce ostylować tego diva, gdy będzie miał klasę class-in-div

Kod HTML:

<div class="parent">
  <div class="another-class class-in-div"></div>
<div>

W tym zagnieżdżonym divie raz będzie, a raz nie ta klasa class-in-div, dlatego chce zastosować takie style.

Czy ktoś jest w stanie uporać się z tym problemem ?

zerknij na ten zapis:

 [class~='class-in-div'] {
        color: yellow;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors?retiredLocale=pl

Staraj się nie używać div w stylach. Div jest do określania wewnątrz tego elementu klas i id

Trochę masz na ciapane. Ten zapis

.parent {
  > div {
   // 
  }
}  

zadziała za klasą parent, wiec nie do końca rozumiem co byś chciał uzyskać.

Można zrobić to tak jak zaproponowała @kasiaKasia

Selektor z samym znakiem = oznacza, że atrybut class może mieć tylko jedną klasę

[class="class-in-div"] {
  color: yellow;
}

<div class="class-in-div"></div>

Jeśli będzie miał ich więcej to nie zostanie znaleziony

<div class="class-in-div other-value"></div>

mielony711 napisał(a):

Czemu jak mam taką składnie w LESS:

    &.class-in-div {
      color: yellow;
  }
}

to selektor &.class-in-div działa ok

I jeśli mam taką składnie &[class="class-in-div"] to z kolei ten selektor już nie zadziała:

Z bardzo prostego powodu, dlatego że selektor .class-in-div pasuje do każdego elementu który ma taką klasę. Natomiast [class="class-in-div"] porównuje czy atrybut class równa się okładnie ciągowi "class-in-div". Czyli nawet jak dopiszesz spacje, to już Ci go nie złapie, nie mówiąc o dodatkowych klasach.

Ogólnie warto używać .class-in-div, a selektor atrybutów ([]) zostawić.