0

I've done a lot of searching but can't figure this one out. The example says it all:

HTML

<div class="content">
  <blockquote>
  Do not select this.
  </blockquote>
  <div>
  I can select this.
  </div>
  How do I select only this?
</div>

CSS

.content>:not(blockquote) {
  font-weight: bold;
}

RESULT

Do not select this.

I can select this.

How do I select only this?

OBJECTIVE

Do not select this.

I can select this.

How do I select only this?

JSFIDDLE

Please note that I need this for web scraping, i.e. the objective is to find the appropriate selector, if possible.

Community
  • 1
  • 1
Harold Cavendish
  • 869
  • 10
  • 22
  • 2
    what you want to select is a text node, you cannot select a text node via css – Musa Jun 12 '18 at 12:59
  • @Musa Not even like: select class `content` but exclude all its children? I thought this would be easy. – Harold Cavendish Jun 12 '18 at 13:00
  • Alright, if it isn't possible to do via CSS selectors, it seems like I'll have to resort to XPath, which seems to do this well (and I'm silly for trying to do this via CSS rather than switching to XPath right away, but oh well): https://stackoverflow.com/questions/4455684/xpath-get-only-node-content-without-other-elements Thanks for your help. – Harold Cavendish Jun 12 '18 at 13:08

2 Answers2

0
.content {
  font-weight: bold;
}
.content *{
  font-weight: normal;
}

Did you try something like this?

Dennis G.
  • 26
  • 1
0

Rather than trying to introduce CSS to make your HTML look right, fixing your HTML will go a long way to keeping your CSS cleaner.

Introduce a <span> tag for the text you want to bold, and a class to make the style changes you want to introduce. There are situations where using <strong> makes sense symantically too, but use it when you want to emphasize something, not when you want to bold something.

Your HTML:

<div class="content">
  <blockquote>
  Do not select this.
  </blockquote>
  <div>
  I can select this.
  </div>
  <span class="font-weight-bold">How do I select only this?</span>
</div>

Your CSS:

.font-weight-bold {
  font-weight: bold;
}
Joey
  • 101
  • 1
  • 3