CSS Selector - issue of specificity

Question

Trying to override the default alignment of a header in the KendoUI grid.

The standard selector looks like this;

.k-grid-header th.k-header, .k-filter-row th {
    overflow: hidden;
    border-style: solid;
    border-width: 0 0 1px 1px;
    padding: .5em .6em .4em .6em;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* text-align: left; */
}

I've added a custom class ("gridheaderalign") to the header cell like this;

<th role="columnheader" data-field="DELIVERED_QUANTITY" rowspan="1" data-title="Del. Qty" data-index="5" id="3ed03852-7178-4513-9648-06a3e42bf69a" class="gridheaderalign k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Del. Qty</a></th>

Trying to write the CSS selector so I can override the default text alignment, tried a number of different permutations but not working!

E.g.

.gridheaderalign.k-header 
{
    text-align: center;
}

.gridheaderalign
{
    text-align: center;
}

Sure it's an issue of specificity, but not sure how to get the correct selector.

Answer 1

Use:

.k-grid-header th.k-header.gridheaderalign
{
    text-align: center;
}

Since .k-grid-header th.k-header has 2 classes and 1 element (the value is 21) and you're trying to override with .gridheaderalign.k-header where 2 classes are there so, this won't override but using .k-grid-header th.k-header.gridheaderalign will override as it has 3 classes and 1 element (the value is 31).

This will also override:

th.k-header.gridheaderalign
    {
        text-align: center;
    }

Here are 2 classes and 1 element (the value is 21) though it will override as it is last rule in the stylesheet.

To know more about how specificity works. See this answer.