I have this div

<div>
    Questions about these terms
    <ol >
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:[email protected]">[email protected]</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

i have other divs

<div>
content here...
</div>

within the same document. I want to bold this text in particular

**Questions about these terms**
    <ol >

that occurs just before this class <ol >

and this doesnt work

.alphabetical::before {
 font-weight:bold !important;
}

Is there a way i can target the text in plain css?

CodePudding user response：

Different ways to do this, some methods are

1. Wrap text you want to be bold i html <b></b>-tags
2. Wrap text you want to be bold i html <span></span>-tags, then style that span with css
3. Set font-weight on parent div, then use font-weigth: initial; on the ol-element selector.

CodePudding user response：

You can not access this text with that selector.

Instead, wrap it to another inline element like span, b, or others, and then get this element with selector:

span.header {
  font-weight: bold;
}

<div>
    <span >Questions about these terms</span>
    <ol >
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:[email protected]">[email protected]</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

See: How ::before works.

Update:

If you want to get this text without wrapping it you can use this:

<div >
    Questions about these terms
    <ol >
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:[email protected]">[email protected]</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

/* Selects each <div>, but only if it is the */
/* only <div> element inside its parent */
/* without container class */

div:only-of-type {
  font-weight: bold;
}
div > * {
  font-weight: initial;
}

CodePudding user response：

Just wrap the text in a div or p (or both) and give that a class and style it. For example:

<div>
    <p >Questions about these terms </p>
    <ol >
      <li>
        <div>If you have any questions about these terms or the Platform, you may contact us by email at
          <a href="mailto:[email protected]">[email protected]</a>.</div>
      </li>
      <li>
        <div>Our VAT number is {vat}.</div>
      </li>
    </ol>
  </div>

And the css:

.foo {
 font-weight: bold;
}