Q:

CSS for hyperlink in table header not applying?

I have the following CSS for tables. I've now added a hyperlink in a table header but the CSS I added for it doesn't seem to apply even with !important. When I view in Dev Tools it looks as though it's applying the CSS for a basic  tag that is set in the Bootstrap file. I can't 100% confirm that because I'm using LESS and the Dev Tools just shows it coming from my compiled site.css file. 
I copied the CSS that applies to the thead > tr > th and added the a.ess-table class from that. 
.ess-table > thead > tr > th, 
.ess-table > tbody > tr > th, 
.ess-table > tfoot > tr > th { 
    background-color: #0078d2; 
    color: white; 
}

a.ess-table > thead > tr > th { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}

But this is what seems to be applied based on the Dev Tools.
a {
    color: #0078d2;
    text-decoration: none;
}

This is the HTML
<table class="table ess-table">
    <thead>
        <tr>
            <th style="width:80px;">
                <a href="#" id="approveAll">Approve</a>
            </th>
            <th style="width:80px;">
                <a href="#" id="denyAll">Deny</a>
            </th>
            <th>Shift Date</th>
            <th>Employee</th>
            <th>Schedule</th>
        </tr>
    </thead>
    <tbody>....</tbody>
<table>

Do I need to make a specific class to apply directly to the  tag in the header? 

A:

Your a is on the wrong side of your css.  It should be:
.ess-table > thead > tr > th a { 

instead of 
a.ess-table > thead > tr > th { 

a {
    color: #0078d2;
    text-decoration: none;
}

.ess-table > thead > tr > th, 
.ess-table > tbody > tr > th, 
.ess-table > tfoot > tr > th { 
    background-color: #0078d2; 
    color: white; 
}

.ess-table > thead > tr > th a { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}
<table class="table ess-table">
    <thead>
        <tr>
            <th style="width:80px;">
                <a href="#" id="approveAll">Approve</a>
            </th>
            <th style="width:80px;">
                <a href="#" id="denyAll">Deny</a>
            </th>
            <th>Shift Date</th>
            <th>Employee</th>
            <th>Schedule</th>
        </tr>
    </thead>
    <tbody>....</tbody>
<table>

