0

I am trying to style all div's content, using the universal selector (*) The issue is - if the content is not <span>, <p>, <hX> etc - it is not being selected. any suggestions how to solve this )if possible at all)?

CSS:

#content * {          
    background-color: green;
    padding:10px;
    color:#FFF;
}

HTML

<div id="content">

  <h3>Hello</h3>
  <p>test paragraph</p>

  and this fails to be selected

</div>

I have reasons not to wrap that line.

Here's JSFiddle: https://jsfiddle.net/yroLx1kj/

Here is the expected result:

enter image description here

Thanks!

Rossitten
  • 1,140
  • 1
  • 16
  • 34
  • `#content *,#content {}` – Temani Afif Apr 16 '21 at 20:11
  • This won't do exactly what is needed: https://jsfiddle.net/yroLx1kj/1/ But thanks – Rossitten Apr 16 '21 at 20:15
  • @0stone0 , partially. I am not selecting that particular bit of text without tags. I'd like to apply the same style for all elements(which, logically, is relied to your suggestion but not entirely what I am looking for) (I guess ) Thank you – Rossitten Apr 16 '21 at 20:45

1 Answers1

2

A hacky idea (I said hacky ...) is to rely on display:inline that will break the layout and you will get the output you want.

#content *,
#content {
  background-color: green;
  color: #FFF;
}

#content * {
  padding: 10px;
}

#content {
  display: inline; /* this will do the magic */
  padding: 10px 0;
}

/* the below to add the right padding, still don't know for the left one */
#content::after {
  content: "    ";
  white-space: pre;
}
<div id="content">

  <h3>Hello</h3>
  <p>test paragraph</p>

  and this fails to be selected

</div>

Read the following to understand how this hack works: https://stackoverflow.com/a/758491/8620333

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Haaa ))) twisted logic, indeed. Thanks Afif ))) I won't use this but - it , indeed, does what I asked )) – Rossitten Apr 17 '21 at 15:51