CODEWITHSUNDEEP
htmlcss
Caverman
Caverman

Reputation: 3707

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?

Upvotes: 0

Views: 45

Answers (3)

babidi
babidi

Reputation: 506

This selector a.ess-table > thead > tr > th means 

<a class="ess-table"><thead><tr><th>...

That's why you need to put <a> under <th> tag. (suggested above)

Upvotes: 1

Jonathan
Jonathan

Reputation: 6537

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>

Upvotes: 2

imjared
imjared

Reputation: 20554

check out your rule:

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

You don't have anchors with the class .ess-table. You're probably looking for something like 

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

Upvotes: 2

Related Questions