Jsoup select elements with multiple classes example shows how to select elements having multiple classes separated by space characters.
How to select elements with multiple classes using Jsoup?
Many times HTML elements have multiple classes applied to them using the “class” attribute as given below.
|
1 |
<div class=”left-align heading”>Content</div> |
It becomes a little tricky to select such elements using CSS style selectors. If the div element had a single class named “left-align”, you could have written Jsoup CSS selector like given below.
|
1 2 3 4 5 6 7 8 9 10 |
String strHTML = "<div class=\"left-align\">Content</div>"; Document document = Jsoup.parse(strHTML); Elements divElements = document.select("div.left-align"); System.out.println("Selected div"); for(Element div : divElements) System.out.println(div); |
Output
|
1 2 3 4 |
Selected div <div class="leftalign"> Content </div> |
If the element contains multiple classes, you can join them using separator “.” (dot) as given below.
|
1 2 3 4 5 6 7 8 9 |
String strHTML = "<div class=\"left-align heading\">Content</div>"; Document document = Jsoup.parse(strHTML); Elements divElements = document.select("div.left-align.heading"); System.out.println("Selected div"); for(Element div : divElements) System.out.println(div); |
Output
|
1 2 3 4 |
Selected div <div class="left-align heading"> Content </div> |
Please note that there is no space between the two classes.
Here is the full example program to select a div with multiple classes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
package com.javacodeexamples.libraries.jsoup; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; public class JsoupMultipleClassesSelectorExample { public static void main(String[] args) { String strHTML = "<div class=\"left-align heading\">Multiple classes</div>" + "<div class=\"left-align\">Content 1</div>" + "<div class=\"heading\">Content 2</div>" + "<div>no class</div>"; Document document = Jsoup.parse(strHTML); //select div elements having left-align class Elements divElements = document.select("div.left-align"); System.out.println("div having single class left-align"); for(Element div : divElements) System.out.println(div); System.out.println(""); //select div elements having heading class divElements = document.select("div.heading"); System.out.println("div having single class heading"); for(Element div : divElements) System.out.println(div); System.out.println(""); //select div elements having left-align and heading classes divElements = document.select("div.left-align.heading"); System.out.println("div having multiple classes left-align and heading"); for(Element div : divElements) System.out.println(div); } } |
Output
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div having single class left-align <div class="left-align heading"> Multiple classes </div> <div class="left-align"> Content 1 </div> div having single class heading <div class="left-align heading"> Multiple classes </div> <div class="heading"> Content 2 </div> div having multiple classes left-align and heading <div class="left-align heading"> Multiple classes </div> |
Please also make sure that when you connect to a website using Jsoup, you set the user agent and referer header values.
This example is a part of the Jsoup tutorial with examples.
Please let me know your views in the comments section below.
About the author
- Gson – Serialize HashMap null entries - April 5, 2023
- Gson: Convert String to JsonObject without POJO - April 5, 2023
- Gson – Convert JSON to a Typed ArrayList - April 5, 2023
