Thymeleaf Tutorial: Chapter 20. Appendix C: Markup Selector Syntax

Table of contents

20 Appendix C: Markup Selector Syntax

Thymeleaf markup selectors are directly borrowed from the Thymeleaf: AttoParser parser library.

The syntax for these selectors is very similar to the syntax of selectors in XPath, CSS, and jQuery, which makes them convenient for most users. You can take a look at the complete syntax reference in the AttoParser documentation.

For example, the following selector will select each <div> with class content at each position inside the markup (note that this is not as concise as it could be, read on to know why):
')

<div th:insert="mytemplate :: //div[@class='content']">...</div> 

The basic syntax includes:

• / x means the direct children of the current node with the name x
• // x means the children of the current node with the name x at any depth
• x [@ z = "v"] means elements with the name x and the z attribute with the value "v"
• x [@ z1 = "v1" and @ z2 = "v2"] means elements with the name x and attributes z1 and z2 with the values ​​"v1" and "v2" respectively
• x [i] means an element named x, located among i among its brothers and sisters
• x [@ z = "v"] [i] means the elements with the name x, the z attribute with the value "v" and placed in the number i among his brothers and sisters, who also meet this condition

But you can use a more concise syntax:

• x is exactly equivalent to // x (searching for an element with a name or link x at any depth level, the link is a th: ref or th: fragment attribute)
• Selectors are also allowed without an element / reference name if they contain argument specifications. Thus, [@ class = 'oneclass'] is a valid selector that searches for any elements (tags) with a class attribute with a value of " oneclass "

Extended attribute selection functions:

• In addition to = (equal), other comparison operators are valid :! = (Not equal), ^ = (starts with) and $ = (ends). For example: x [@class ^ = 'section'] means elements with the name x and an attribute class value that starts with a section.
• Attributes can be specified starting from @ (XPath style) or without (jQuery-style). So, x [z = 'v'] is equivalent to x [@ z = 'v']
• Modifiers with multiple attributes can be combined with both (in XPath style) and by combining several modifiers (jQuery style). Thus, x [@ z1 = 'v1' and @ z2 = 'v2'] is actually equivalent to x [@ z1 = 'v1'] [@ z2 = 'v2'] (as well as x [z1 = 'v1'] [z2 = 'v2'] )

JQuery direct selectors:

• x.oneclass is equivalent to x [class = 'oneclass']
• .oneclass is equivalent to [class = 'oneclass']
• x # oneid is equivalent to x [id = 'oneid']
• #oneid is equivalent to [id = 'oneid']
• x% oneref means tags <x> that have the attribute th: ref = "oneref" or th: fragment = "oneref"
• Direct selector and attribute selector can be mixed: a.external [@href ^ = 'https']

Thus, the Markup Selector expression is higher:

 <div th:insert="mytemplate :: //div[@class='content']">...</div> 

Can be written as:

 <div th:insert="mytemplate :: div.content">...</div> 

Having studied another example, do the following:

 <div th:replace="mytemplate :: myfrag">...</div> 

It will look for a fragment of the fragment th: fragment = "myfrag" (or th: ref links). But they would also search for tags with the name myfrag , if they existed (which is not in HTML).

Note the difference with:

 <div th:replace="mytemplate :: .myfrag">...</div> 

... which will actually look for any elements with class = "myfrag" , without worrying about the signatures: th: fragment (or th: ref ).

Multivalued class mapping

Markup selectors understand that the class attribute is multivalued (multivalued), and therefore allows the use of selectors for this attribute, even if the element has several class values.

For example, div.two would match

 <div class="one two three" />