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

  • Tutorial
Table of contents

20 Appendix C: Layout 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 full syntax link in the AttoParser documentation.

For example, the following selector will select each
with the contents of the class in each position inside the markup (note that this is not as concise as it could be, read on to know why):


The basic syntax includes:

  • / x means the direct children of the current node named x
  • // x means children of the current node named x at any depth
  • x [@ z = "v"] means elements with the name x and attribute z 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 in number i among his siblings
  • x [@ z = "v"] [i] means elements with the name x, the attribute z with the value "v" and are placed in the number i among his siblings, which also meet this condition

But you can use a more concise syntax:

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

Advanced attribute selection functions:

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

Direct jQuery type 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 [id = 'oneid']
  • x% oneref means tagsthat have the attribute th: ref = "oneref" or th: fragment = "oneref"
  • Direct selectors and attribute selectors can be mixed: a.external [@href ^ = 'https']

So the Markup Selector expression above:


It can be written as:


After examining another example, follow these steps:


Will search for a fragment fragment th: fragment = "myfrag" (or th: ref links). But they would also look for tags called myfrag if they existed (which is not in the HTML).

Please note the difference with:


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

Multivalued mapping class

selectors Markup understand that attribute class is a multi-valued (multivalued), and therefore allows the use of this attribute selectors, even if the item has multiple class values.

For example, div.two will match

Also popular now: