CSS Style Selector

• May 03, 2024
• 5 minutes to read

Any HTML element exposes the class property that allows you to assign one CSS style to this element, or a series of styles that are active all at once.

<!-- This "img" element has one "avatar" style applied -->
<img src="employee" class="avatar">
<!-- This "div" tag has four CSS styles applied -->
<div id="removeBtn" class="centered button button-remove button-width-70">Remove</div>

Styles assigned by the class property are applied unconditionally. If you want to select which style should be applied depending on the data field value, use the dx-class property (instead of the standard class property or along with it).

Selector for Boolean Properties

Create two CSS styles and type their names in the dx-class tag using the comma as a delimiter. The first class (before the comma) is applied when the related field returns true. The second class is applied when the field returns false.

.defaultStyle { /* Setting1: defaultValue; */ }
.style-for-true { /* Setting1: variation_A; */ }
.style-for-false { /* Setting1: variation_B; */ }

<div class="defaultStyle" dx-class="{FieldName: style-for-true, style-for-false}"></div>

You can ignore either of the Boolean values and apply a conditional style only for the opposite value. To do this, specify the style name (or multiple names) on only one side of the comma delimiter.

<!-- Conditional styling for "true" values -->
<div dx-class="{FieldName: style-for-true}"></div>

<!-- Conditional styling for "false" values -->
<div dx-class="{FieldName: , style-for-false}"></div>

Specify multiple style names to apply various styles to the same Boolean value.

<div dx-class="{FieldName: true-style-1 true-style-2 true-style-3, false-style-A false-style-B}"></div>

Example

The following markup illustrates an item template for a control bound to a list of employees. Each record stores the Boolean OnLeave field value. When this value equals true, no conditional style is applied to the final div element (no style name before the comma). Otherwise, the “.hidden-element” style applies.

<div class="horz-container">
    <div class="name">${FirstName}</div>
    <div class="name">${LastName}</div>
    <div class="vacation-label" dx-class="{OnLeave: , hidden-element}">Vacation</div>
</div>

.vacation-label {
    background-color: purple;
    color: White;
    width: 70px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
}

.hidden-element {
    visibility: hidden;
}

As a result, the “Vacation” label is shown only for employees who are currently out of the office.

Selector for Enumeration Properties

For each possible value of the related field, create a CSS style with a name that matches this value.

C#

public MyEnumeration PropertyX { get; set; }

public enum MyEnumeration {
    ValueA,
    ValueB,
    ValueC,
}

VB.NET

Public Property PropertyX() As MyEnumeration

Public Enum MyEnumeration
    ValueA
    ValueB
    ValueC
End Enum

<div class="defaultStyle" dx-class="{PropertyX}"></div>

.defaultStyle { /* Setting1: defaultValue; */ }
.ValueA { /* Applied when PropertyX returns "ValueA" */ }
.ValueB { /* Applied when PropertyX returns "ValueB" */ }
.ValueC { /* Applied when PropertyX returns "ValueC" */ }

You can also explicitly specify CSS style names in the HTML markup. In this case, styles are applied according to the order of enumeration values.

C#

public enum MyEnumeration {
    ValueA,
    ValueB,
    ValueC,
}

VB.NET

Public Enum MyEnumeration
    ValueA
    ValueB
    ValueC
End Enum

<div dx-class="{ PropertyX: Style3, Style2, Style1 }"></div>

.Style1 { /* Applied when PropertyX returns "ValueC" */ }
.Style2 { /* Applied when PropertyX returns "ValueB" */ }
.Style3 { /* Applied when PropertyX returns "ValueA" */ }

Example

The ListBox HTML Demo draws colored circles above employees’ photos. The related div element has one static style…

<div class="contact-avatar">
    <img class="photo" src="${Photo}" />
    <div class="status"></div>
</div>

.status {
    background-color: @Warning;
    border:4px solid @Window;
    margin: -64px 0px 0px 48px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

…and circle colors are modified in the CustomizeItem event handler.

C#

void ListBoxControl1_CustomizeItem(object sender, XtraEditors.CustomizeTemplatedItemEventArgs e) {
    var statusBadge = e.HtmlElement?.FindElementById("status");
    bool online = employeesOnline[e.Index];
    if(statusBadge != null && online)
        statusBadge.Style.SetBackgroundColor("@Green");
}

VB.NET

Private Sub ListBoxControl1_CustomizeItem(ByVal sender As Object, ByVal e As XtraEditors.CustomizeTemplatedItemEventArgs)
    Dim statusBadge = e.HtmlElement?.FindElementById("status")
    Dim online As Boolean = employeesOnline(e.Index)
    If statusBadge IsNot Nothing AndAlso online Then
        statusBadge.Style.SetBackgroundColor("@Green")
    End If
End Sub

In this demo, ListBox items visualize objects of the Employee class. This class exposes the Status property of the EmployeeStatus enumeration type with the following values: Salaried, Commission, Contract, Terminated, OnLeave.

The following markup illustrates how to leverage the dx-class to draw circles of different colors depending on an employee’s status.

<div class="contact-avatar">
    <img class="photo" src="${Photo}" />
    <div class="status" dx-class="{Status}"></div>
</div>

.status {
    background-color: @Warning;
    border:4px solid @Window;
    margin: -64px 0px 0px 48px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

.Terminated { background-color: @Red; }
.Salaried { background-color: @Green; }
.Commission { background-color: Purple; }
.Contract { background-color: @Blue; }

Note that the CSS stylesheet above has no .OnLeave style. As such, employee records with this status use the @Warning color according to the default element style.

Selector for String Properties

Specify CSS styles with names that match possible string values.

.ValueA { /* ... */ }
.ValueB { /* ... */ }
.ValueC { /* ... */ }

<div dx-class="{MyProperty}"></div>

C#

// Can return "ValueA", "ValueB", and "ValueC" among other possible string values
public string MyProperty { get;set; }

VB.NET

' Can return "ValueA", "ValueB", and "ValueC" among other possible string values
Public Property MyProperty() As String

Example

The following markup adds two conditional styles applied when the FirstName property is either “John” or “Samantha”. Other names are styled only with the default “name” style.

<div class="name" dx-class="{FirstName}">
    ${FirstName} {LastName}
</div>

.name {
    font-size: 18px;
    line-height: 24px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.John { color: Red; }

.Samantha { color: Green; }