patternhtmlMinor

Targeting specific elements with CSS only

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

csselementswithtargetingspecificonly

Problem

This code below works as needed, but I am not sure if there is a more elegant way with pure CSS. I have a table with two columns, and 4+ rows. I'll actually upload a picture. It's the first table in grey that I am messing with.

I want to select all the TDs--except for the first TD, because that first one has been changed to vertical text--and give them a 100% width and text align center. Any thoughts?

.greyBG tr:nth-of-type(1) ~ tr > td {
    width: 100%;
    text-align: center;
}

And the HTML:


         
            
               Landscape
            
            
               Lorum Ipsum
             
             
                Lorum Ipsum
              
              
                 Lorum Ipsum
              
              
                  Lorum Ipsum

Solution

Markup

If you have a td that you're giving a class that indicates that it is some sort of heading, you should be using a th instead. The th element is allowed to appear in a tbody, it isn't restricted to thead.

When validated, this table will generate warnings regarding different numbers of cells in each row. The correct structure should look like this:


    
        
            Landscape
            Lorum Ipsum
        
        
            Lorum Ipsum
        
        
            Lorum Ipsum
        
        
            Lorum Ipsum

Be consistent with your indentation.

CSS

Now that the markup is simplified, it's child's play to simplify the CSS

.greyBG td {
    width: 100%;
    text-align: center;
}

Demo: http://codepen.io/cimmanon/pen/GqKcx

Code Snippets

<table class="greyBG">
    <tbody>
        <tr>
            <th rowspan="4">Landscape</th>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
    </tbody>
</table>

.greyBG td {
    width: 100%;
    text-align: center;
}

Context

StackExchange Code Review Q#64202, answer score: 3

Revisions (0)

No revisions yet.