I am very new with CSS selectors and was wondering if there was something like a following sibling for them.
Example: I am trying to extract just the dates from this piece of code
<p class="premiumOnly">
<strong>Original bar admit date:</strong> 5/10/1974<br>
<strong>Colorado bar admit date:</strong> 5/10/1974
The selector #Listing > div.col-sm-8.text-left.memberOnly > div.row > div.col-sm-7 > p:nth-child(4) > strong:nth-child(1)
is only getting the text Original bar admit date but not the actual dates
Kindly advise if there is a way to get the dates only. I can also accommodate a Regex along with the selector if needed
Thanks
您必须用一些span
或其他标签包装要设置样式的文本才能选择它。
Targeting strong:nth-child(1)
will just grab what's in the strong tag. I'm assuming p:nth-child(4)
is .premiumOnly
in your code. To extract just the dates, you can target that paragraph, and use regex and remove the stuff you don't want.
var p = document.getElementById('p').innerHTML; p = p.replace(/<strong>.*<\\/strong>|<br>|\\n/g,''); console.log(p);
<p class="premiumOnly" id="p"> <strong>Original bar admit date:</strong> 5/10/1974<br> <strong>Colorado bar admit date:</strong> 5/10/1974 </p>
If your actual use-case is just as your example is, you should be able apply a style to the entire paragraph (dates and strong text), and then remove that style from the strong text. What you're left with is a style that only affects the dates.
For example, if you wanted to make the dates red... https://jsfiddle.net/1sdqoug5/
p.premiumOnly { color: red; } p.premiumOnly > strong { color: initial; }
<p class="premiumOnly"> <strong>Strong Text: </strong> date<br> <strong>Strong Text 2: </strong> date </p>
It is exists indeed, the selector A + B
matches any B
element preceded by an A
element. It is not of help in you case however, because the strong
element has no immediate siblings. The date you want to extract is a text node. You either wrap it in a span
like <strong>Original bar admit date:</strong> <span>5/10/1974</span
so you can match it by selecting strong + span
or alternatively use the DOM or jQuery API to target the text node
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.