0

In the code below, I want to apply a blue background only to the element with the text "blue" (which is a child of the element #hello), but not any other elements that have that class (here: "not blue!").

#hello>*.setcolor is my (failed) attempt to say "for the element with id hello, apply the style to any child element that has the class setcolor.

#hello>*.setcolor {
  background-color: blue;
}
<div id="hello">
  <div>
    <div class="setcolor">
      blue
    </div>
  </div>
</div>
<div class="setcolor">
  not blue!
</div>
WoJ
  • 27,165
  • 48
  • 180
  • 345
  • Much of your description including for example `.q-field__control` is not in the sample code provided. That being said this can be a super simple set of CSS however your "constraints" you attempted to describe are not clear. – Mark Schultheiss Jul 13 '23 at 13:44
  • Yes, I wanted first to point to the actual component I am using, and then provide simple code to reproduce the issue. But you are right, I will remove the first part that does not add much value. I will attempt to clarify the constraints - and yes, i am sure it is super simple :) – WoJ Jul 13 '23 at 13:46
  • This shoud work: *any* `class` inside `id` is `#id .class { .. }` (with a space) and *only direct child* elements would be `#id>.class { .. }` (with an angle bracket). – Rene van der Lende Jul 13 '23 at 13:49
  • you could also use a data attribute and set CSS based on the value `.setcolor[data-color="orange"] { background-color: #ffa50080; }` for this: `
    `
     – Mark Schultheiss Jul 13 '23 at 14:02
  • The question has been closed incorrectly, OP is asking for a `#hello .setcolor` rule specifying that the element has to have a child text node with the content blue. That question has been answered here https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text . This would be possible with javascript though – Blye Jul 13 '23 at 14:06
  • 2
    @Blye The question was closed correctly. OP's problem is using `>` while not understanding that it only applies to direct (immediate) descendants. Removing the `>` changes the selector to a general descendant/child selector, which will work per OP's specifications. This is what the duplicate target is about (the differences between direct descendant and general child selectors) – TylerH Jul 13 '23 at 14:08
  • My bad, the `I want to apply a blue background only to the element with the text "blue"` was ambiguous wording – Blye Jul 13 '23 at 14:12

0 Answers0