Scss Selector for an element with 2 classnames-CodePudding

I am looking for a css selector for adjacent classnames.

Ie:

<div className="container, greeting">Hi</div>

So that is a div with 2 classNames. I need a scss selector that will only apply styles for an element with those 2 classnames attached to it. I have tried:

.container {
  &   .greeting {color: blue}
}

But it doesnt seem to work.

CodePudding user response：

Your HTML is invalid, you don't need a comma in the class property, you just put a space between them. I think this is why your SCSS isn't working

<div className="container greeting">Hi</div>

Otherwise, in vanilla CSS this is possible, it's just this:

.container.greeting{
   styles
}

CodePudding user response：

selects the immediately next sibling.

You want to select an element that has both classes rather than select the next one so this should work better:

.container {
  &.greeting {color: blue}
}

And as others have pointed out, look at the formatting in className (class attribute).