如何使用 CSS 选择器划分 div 元素的内容？

Question

Let's say i have something like that:

<div class="c1">
    BlahBlahBlah Some text that I want to fetch.
    <br/>
    <div class="c2">something does not important.</div>
    <a href="blabla.html">a link text</a>
</div>

I want to fetch just "BlahBlahBlah Some text that I want to fetch." text. When I use "div.c1" css selector, It gives "BlahBlahBlah Some text that I want to fetch. something does not important. a link text."

How can I fetch the text that I want? (Note: HTML code does not contain any mistake, please do not suggest modification, it is certainly as I wrote. The site that I want to fetch text does not belong to me, so I can not change the code.)

Answer 1

Simple answer. You can't. CSS selectors target Nodes, not specific letters in some text. There are small exceptions when you consider pseudo selectors, but you can't accomplish what you want with CSS alone.

The best advice I have is to modify the HTML and wrap the content you want to target in a <span> element and give it a CSS class that you can actually target.

Edit : (Since finding out you can't modify the page and you're using Jsoup to fetch it.)

Since you're using Jsoup to fetch the page and target your Node you simply have one more step to grab your text. Basically, after you select your node and grab the inner text, just run a regex over it and grab everything before the first period.

Your regex should look something like this in Java: "(.*\\\\.)"

Answer 2

You can "fetch" the text you want, assuming you mean "select" it for purposes of applying CSS rules, by writing a rule for the top-level element, and then overriding it for the children:

.c1   { color: rebeccapurple; }
.c1 * ( color: initial; }