DEV Community

Cover image for A New Challenger to CSS Selectors: WebForms Place Criteria (WPC)
Elanat Framework
Elanat Framework

Posted on

A New Challenger to CSS Selectors: WebForms Place Criteria (WPC)

#css #html #javascript #webformscore

One of the major improvements in WebForms Core 2.1 is the expansion of WebForms Place Criteria (WPC).

WPC is a DSL built into WebForms Core for selecting, filtering, and manipulating HTML elements and groups of DOM elements. At its basic level, WPC provides selectors for finding elements by ID, Name, Tag, Class, and Attribute, as well as navigating through children, parents, the current element, the target element, Document, Window, HTML, Head, Root, and other locations within the DOM. Elements can also be selected by index, all matching elements can be retrieved, and selection paths can be combined using methods such as Child() and Parent().

WPC selectors are used to find (or select) HTML elements (and beyond) that you want to apply changes to. WPC is a competitor to CSS Selectors, yet it also covers the syntax of CSS Selectors. WPC is only available in WebForms Core and is not available outside of this technology.

However, the main focus of this article is WebForms Place Criteria, or Criteria. Criteria extends the basic WPC selection mechanism by allowing developers to filter and evaluate already-selected elements based on their text content, attributes, tag names, visibility, enabled or disabled state, checked state, DOM relationships, position, ranges, and element sets. Criteria supports different operators and allows multiple conditions to be chained together, making it possible to create complex selections that cannot be expressed using only an ID, Class, Tag, or other basic selector.

The examples in this article therefore focus specifically on the Criteria layer of WPC and demonstrate how it can be used to refine element selections, evaluate their properties and state, navigate their relationships, and combine multiple conditions to produce precise DOM selections.

These examples demonstrate how WPC can go far beyond selecting an element by ID or class.

1. Filtering by Text and Numeric Value

First, all <td> elements are selected and filtered according to their text content:

form.SetBackgroundColor("Criteria|<td>*?t>:10", "lightgreen");
form.SetBackgroundColor("Criteria|<td>*?t<10", "red");
Enter fullscreen mode Exit fullscreen mode

In:

Criteria|<td>*?t>:10
Enter fullscreen mode Exit fullscreen mode
  • It starts with the tag with the ID "Criteria" (id=Criteria).
  • <td>* selects all <td> elements.
  • ?t checks the direct text of the element.
  • > performs a greater-than comparison.
  • :10 includes 10 in the comparison, resulting in >= 10.

Therefore, table cells whose values are greater than or equal to 10 become green.

For example:

17  → green
6   → red
5   → red
11  → green
9   → red
15  → green
20  → green
Enter fullscreen mode Exit fullscreen mode

The second condition:

form.SetBackgroundColor("Criteria|<td>*?t<10", "red");
Enter fullscreen mode Exit fullscreen mode

selects cells whose values are less than 10.

This means WPC can select a collection of elements and then filter that collection according to their values.

2. Combining Criteria with Different Operators

This example changes the font size of elements whose value is greater than 10:

form.SetFontSize("Criteria|<td>*?!t<:10", 22);
Enter fullscreen mode Exit fullscreen mode

Here, ! reverses the condition.

Therefore:

!t<:10
Enter fullscreen mode Exit fullscreen mode

means that the element must not have text less than or equal to 10.

The result is that values greater than 10 are selected.

Another example:

form.SetStyle("Criteria|<td>*?t:20", "border", "2px solid");
Enter fullscreen mode Exit fullscreen mode

This selects only <td> elements whose text is exactly 20.

In the resulting HTML, the two cells containing 20 receive a border.

3. Searching for Text Inside Elements

WPC can also search directly for text:

form.AddText("Criteria|*?t*Adriano", "Find: Adriano");
Enter fullscreen mode Exit fullscreen mode

The following part:

t*Adriano
Enter fullscreen mode Exit fullscreen mode

means that the element's text must contain Adriano.

The original HTML contains:

<div class="child-check">
    <u>underline</u>
    Adriano Leite Ribeiro is a <b>Brazilian</b> former professional footballer.
</div>
Enter fullscreen mode Exit fullscreen mode

This <div> is found, and the following text is added to it:

Find: Adriano
Enter fullscreen mode Exit fullscreen mode

Therefore, WPC can be used not only for numeric comparisons, but also for searching textual content.

4. Selecting Elements by Attribute

WPC can also select elements based on an attribute and its value:

form.SetValue("Criteria|*?a\"att1\"$9", "att1 attribute End With 9");
Enter fullscreen mode Exit fullscreen mode

Here:

a"att1"$9
Enter fullscreen mode Exit fullscreen mode

means:

  • a → attribute value
  • "att1" → attribute name
  • $ → the attribute value ends with
  • 9 → the value being searched for

The original HTML contains:

<input att1="123456789" ...>
<input att1="119" ...>
<input att1="59" ...>
<input att1="1000" ...>
<input att1="2500" ...>
Enter fullscreen mode Exit fullscreen mode

Therefore, these values:

123456789
119
59
Enter fullscreen mode Exit fullscreen mode

match because they end with 9.

This allows WPC to filter elements based on attribute names and attribute values.

5. Selecting Elements by Tag Name

Another example is:

form.SetStyle("Criteria|*?g^inp", "border", "2px solid yellow");
Enter fullscreen mode Exit fullscreen mode

Here:

g^inp
Enter fullscreen mode Exit fullscreen mode

means that the tag name starts with inp.

Therefore, all:

<input>
Enter fullscreen mode Exit fullscreen mode

elements are selected.

As a result, all input elements in the form receive a yellow border.

6. Checking Visibility

This example demonstrates visibility filtering:

form.Message(Fetch.GetText("Criteria|<div>*?!v"));
Enter fullscreen mode Exit fullscreen mode

v is the visibility criterion.

The ! operator reverses the condition, so:

?!v
Enter fullscreen mode Exit fullscreen mode

selects elements that are not visible.

The original HTML contains:

<div class="child-check" style="display:none">
    <u>underline</u>Is Visible Tag!
</div>
Enter fullscreen mode Exit fullscreen mode

Because this element is hidden, WPC can find it using the visibility criterion.

7. Finding Disabled Elements

This example finds disabled input elements:

form.AddValue("Criteria|<input>*?!e", "Is Disabled");
Enter fullscreen mode Exit fullscreen mode

e represents whether an element is enabled.

Therefore:

!e
Enter fullscreen mode Exit fullscreen mode

means that the element is not enabled — in other words, it is disabled.

The original HTML contains:

<input att1="2500" type="text" name="text5" disabled value="5">
Enter fullscreen mode Exit fullscreen mode

This input is selected, and the following value is added:

Is Disabled
Enter fullscreen mode Exit fullscreen mode

8. Finding Checked Checkboxes

WPC can also work with the current state of checkboxes:

form.SetChecked("Criteria|\"type'checkbox\"*?!c", true);
Enter fullscreen mode Exit fullscreen mode

Here:

"type'checkbox"
Enter fullscreen mode Exit fullscreen mode

selects elements where:

type = checkbox
Enter fullscreen mode Exit fullscreen mode

Then:

!c
Enter fullscreen mode Exit fullscreen mode

means that the checkbox is not checked.

Therefore, the checkboxes that were initially unchecked are selected.

The original HTML contains:

<input type="checkbox" ...>
<input type="checkbox" ...>
<input type="checkbox" ... checked>
<input type="checkbox" ...>
<input type="checkbox" ...>
<input type="checkbox" ... checked>
Enter fullscreen mode Exit fullscreen mode

The checkboxes without checked are found by the criteria.

9. Using c for Checked Checkboxes

The opposite operation is also possible:

form.AddLabel("Criteria|\"type'checkbox\"*?c", "Add New Label");
Enter fullscreen mode Exit fullscreen mode

?c means that only checkboxes that are checked are selected.

In the original HTML, vehicle3 and vehicle6 are checked.

Therefore, a new label is added for those elements.

This demonstrates that WPC can work with the current state of the DOM, not only with static HTML attributes.

10. Checking for Children

Consider this HTML:

<div class="child-check">
    <u>underline</u>ABC
</div>
Enter fullscreen mode Exit fullscreen mode

We can check whether an element has a child:

form.AddText("Criteria|{child-check}*?h", "Is Has Child!");
Enter fullscreen mode Exit fullscreen mode

{child-check}* selects all elements with the child-check class.

Then:

?h
Enter fullscreen mode Exit fullscreen mode

keeps only elements that have a child.

In this example, <u> is a child of the <div>, so the text is added to the <div> elements.

It is also possible to check for a specific child:

form.AddText("Criteria|{child-check}*?h<u>", "Has u Child!");
Enter fullscreen mode Exit fullscreen mode

This means:

Find elements with the child-check class that have a direct <u> child.

11. Checking Descendants with H

The difference between h and H can also be demonstrated:

form.SetFontSize("Criteria|*?H<u>", 26);
Enter fullscreen mode Exit fullscreen mode

H checks whether an element contains a descendant.

Therefore, if an element contains a <u> at any depth, it can be selected.

In contrast, h checks for a direct child.

In simple terms:

h → Direct Child
H → Descendant
Enter fullscreen mode Exit fullscreen mode

12. Range and Index Selection

WPC can also operate on a specific range of elements:

form.SetWidth("Criteria|\"type'checkbox\"*?[4:]", 30);
Enter fullscreen mode Exit fullscreen mode

[4:] means from index 4 to the end.

Therefore, the fifth and sixth checkboxes receive a width of 30px.

Then:

form.SetWidth("Criteria|\"type'checkbox\"*?![3:]", 20);
Enter fullscreen mode Exit fullscreen mode

The ! reverses the range condition, so elements outside that range are selected.

This is useful when you need to operate on a specific portion of a collection.

13. Selecting Siblings

WPC can also move relative to previous and next sibling elements.

For example:

form.SetBackgroundColor("BTag|<b>1?+", "lightblue");
Enter fullscreen mode Exit fullscreen mode

First:

<b>1
Enter fullscreen mode Exit fullscreen mode

selects the <b> element at index 1.

Then:

?+
Enter fullscreen mode Exit fullscreen mode

moves to the next sibling element.

Another example:

form.SetBackgroundColor("BTag|<b>2?++", "lightgreen");
Enter fullscreen mode Exit fullscreen mode

++ means to select all following siblings.

As a result, several <b> elements from a specific point onward receive a green background.

Movement in the opposite direction is also possible:

form.SetTextColor("BTag|<b>-1?--", "red");
Enter fullscreen mode Exit fullscreen mode

-- selects all previous siblings.

And:

form.SetFontSize("BTag|<b>-1?-5", 26);
Enter fullscreen mode Exit fullscreen mode

can move through a specified number of previous siblings.

14. Multiple Criteria in One Expression

One of the important features is the ability to combine multiple criteria in a single expression:

form.AddStyle("BTag|<b>1?-?+2", "border", "2px solid");
Enter fullscreen mode Exit fullscreen mode

The selection is performed in multiple stages:

<b>1
   ↓
-
   ↓
+
   ↓
2
Enter fullscreen mode Exit fullscreen mode

The result of one selection becomes the input for the next operation.

Therefore, WPC is not simply a basic selector. Multiple selection operations can be chained together.

15. Intersection and Union

WPC can also combine multiple sets of elements.

For example:

form.SetBackgroundColor("UTag|<u>*?&UTag$[vb];<u>0?.UTag$[vb];<u>2", "violet");
Enter fullscreen mode Exit fullscreen mode

& is used for Intersection.

This means that only elements existing in both sets are selected.

In contrast:

.
Enter fullscreen mode Exit fullscreen mode

is used for Union.

For example:

form.SetBackgroundColor("UTag|<u>1?.UTag$[vb];<u>3?.UTag$[vb];<u>5", "lightblue");
Enter fullscreen mode Exit fullscreen mode

combines multiple element sets using ..

This makes it possible to combine different groups of DOM elements into a single selection.

16. Difference

In this example:

form.SetBackgroundColor("ITag|<i>*?\\ITag$[vb];<i>3?", "pink");
Enter fullscreen mode Exit fullscreen mode

\ is used for Difference.

In other words:

Select all <i> elements, then remove the elements belonging to the second set.

That is why most of the <i> elements become pink while the excluded element remains unchanged.

17. Adding a New Tag to an Existing Element

This example:

form.AddTagToUp("ITag|//", "h3", "H3Tag");
form.SetText("H3Tag", "H3 Tag Added!");
Enter fullscreen mode Exit fullscreen mode

adds a new <h3> element above the specified location.

Then:

form.SetText("H3Tag", "H3 Tag Added!");
Enter fullscreen mode Exit fullscreen mode

sets its text.

As a result, the final HTML contains:

<h3 id="H3Tag">H3 Tag Added!</h3>
Enter fullscreen mode Exit fullscreen mode

before the button.

18. Adding a Tag to Multiple Elements

In this example:

form.AddTag("SpanTags|<span>*|//", "marquee");
form.SetText("<marquee>*", "Marquee Tag Added!");
Enter fullscreen mode Exit fullscreen mode

the existing <span> elements inside SpanTags are selected, and a new marquee structure is added.

Then:

form.SetText("<marquee>*", "Marquee Tag Added!");
Enter fullscreen mode Exit fullscreen mode

sets the text of all generated marquee elements.

The same pattern is used for <b> elements:

form.AddText("SpanTags|<span>*|//|<b>", "Add in b Tag Successful!");
Enter fullscreen mode Exit fullscreen mode

As a result, new elements are inserted into the existing DOM structure.

19. Selecting Direct Children

The final example demonstrates navigation through a specific DOM path:

form.SetBackgroundColor("DirectChild|.<div>-1|.<div>-1", "#50689b");
Enter fullscreen mode Exit fullscreen mode

The original HTML contains:

<div id="DirectChild">
    <div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>

    <div>
        <div>D...</div>
        <div>E</div>
        <div>F</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The expression:

.<div>-1|.<div>-1
Enter fullscreen mode Exit fullscreen mode

selects the last <div> at each step of the path.

As a result, the F element is selected and its background color is changed:

<div style="background-color: rgb(80, 104, 155);">F</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

These examples demonstrate that WebForms Place Criteria (WPC) in WebForms Core 2.1 is much more than a simple ID or class selector.

CSS Selector VS WebForms Place Criteria (WPC)

It can:

  • Search by text using t and T.
  • Perform numeric comparisons.
  • Filter by attributes.
  • Select elements by tag name.
  • Find visible, enabled, disabled, and checked elements.
  • Check for children or descendants.
  • Work with ranges and indexes.
  • Navigate to previous and next siblings.
  • Chain multiple criteria together.
  • Perform Intersection, Union, and Difference operations.
  • Navigate through the DOM structure.
  • Dynamically create and insert new tags based on the selection.

These examples show how ElementPlace evolves from simple element addressing into a query and filtering system for the DOM in WebForms Core 2.1.

Top comments (0)