Get element from multiple div class with colon in css html

Question

There are 2 classes with the same name

<div class="website text:middle"><a href="/class/name" class=" "> A</a></div>
<div class="website text:middle"><a href="/class/grade" class=" "> 1</a></div>

How to get A and 1? I tried using getElementById with :eq(0) and it gives out null

How exactly does your query look like? You haven't provided us with any sample Java code. — Janez Kuhar, Sep 16 '21 at 09:39
Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 23 '21 at 15:22

Janez Kuhar · Accepted Answer · 2021-09-16T22:19:18.087

2

Method getElementById queries for elements with a specified id, not class; I'm not sure what you were trying to query with :eq(0) either.

Try:

// String html = ...
Document doc = Jsoup.parse(html);
List<String> result = doc.getElementsByClass("text:middle").eachText();
// result = ["A", "1"]

EDIT

You can query for elements that match multiple classes! See Jsoup select div having multiple classes.

However, a colon (:) is a special character in css and needs to be escaped when it appears as part of a class name in a selector query. I don't think that jsoup currently supports this and simply treats everything after a colon as a pseudo-class.

edited Sep 16 '21 at 22:19

answered Sep 16 '21 at 09:20

Janez Kuhar

3,705
4
22
45

Does this work with spaces? also the code gives the error The method eachText() is undefined for the type Elements – Cat Man Sep 16 '21 at 10:31
@CatMan Please see my edit. I don't understand what you meant by *"the code gives the error The method eachText() is undefined for the type Elements"* - [`eachText()`](https://jsoup.org/apidocs/org/jsoup/select/Elements.html#eachText()) **is** defined on `Elements`. – Janez Kuhar Sep 16 '21 at 22:21

score 1 · Answer 2 · answered Sep 21 '21 at 11:46

To add to Janez's correct answer - while jsoup's CSS selector (currently) doesn't support escaping a : character in the class name, there are other ways to get it to work if you want to use the select() method instead of getElementsByXXX -- e.g. if you want to combine selectors in one call:

Elements divs = doc.select("div[class=website text:middle]");

That will find div elements with the literal attribute class="website text:middle". Example.

Or:

Elements divs = doc.select("div[class~=text:middle]");

That finds elements with the class attribute that matches the regex /text:middle/. Example

For the presented data though, I think think the getElementsByClass() DOM method is the way to go and the most general. I just wanted to show a couple alternatives for other cases.

@CatMan You should accept this answer instead of mine. – Janez Kuhar Sep 21 '21 at 14:01 — Janez Kuhar, Sep 21 '21 at 14:01

Amir Rahman · Answer 3 · 2021-09-16T09:25:59.967

-1

document.querySelectorAll(".website")[0] // 0 is child index

you should use querySelector it is fully supported by every browser check this for support details support

edited Sep 16 '21 at 09:25

answered Sep 16 '21 at 09:21

Amir Rahman

1,076
1
6
15

what he describes from his question seems like he is trying getElementById then eq(0) to get child by index there is no function in css called getElementById – Amir Rahman Sep 16 '21 at 09:28
for css use .website:nth-child(1) psuedo selector. index starts with 1 so 1 is first element with same class and sorry for too many edits i am bad with editor – Amir Rahman Sep 16 '21 at 09:42

Get element from multiple div class with colon in css html

3 Answers3