CODEWITHSUNDEEP
htmlcsscss-selectors
Alverto
Alverto

Reputation: 49

:nth-child() not working

I am trying to stretch an image on the background for print for the third th with the :nth-child(5); but it does not catch it. Am I doing something wrong?

table#OppPracticeOverview tr th {
    padding:5px !important;
    background-color:transparent;
}
table#OppPracticeOverview tr th img {
    width:47px;
    height:22px;
    float:left;
    margin:-5px 0 0 -42px;
    position:absolute;
    z-index:-1;
}
table#OppPracticeOverview tr th img:nth-child(5) {
    width:110px;
    height:22px;
    float:left;
    margin:-5px 0 0 -105px;
    position:absolute;
    z-index:-1;
}

HTML:

<table id="OppPracticeOverview">
<tbody>
    <tr>
        <th>
            Patients
            <img src="/images/img-CCCCCC.png">
       </th>
       <td>
       <th>
           On Hold
           <img src="/images/img-CCCCCC.png">
        </th>
        <td>
        <th>
           Reattribution Request
          <img src="/images/img-CCCCCC.png">
       </th>
       <td>
   </tr>
</tbody>

Upvotes: 2

Views: 20992

Answers (5)

Surendra Kumar Ahir
Surendra Kumar Ahir

Reputation: 1697

Some time nth-child not work try this nth-of-type()

table#OppPracticeOverview tr th:nth-of-type(5) img

this is working for me

Upvotes: 0

enRaiser
enRaiser

Reputation: 2646

In my case I made a small mistake

.someclassA .someclassB: nth-child(odd){

You can see as above there is one space between someclassB: and nth-child. thats it.. By deleting that space it started working :)

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

It's nth-child relative to it's parent. So you're saying "the 5th img its parent the th". Your html is screwy (as in wrong), but I think you should try targeting the th instead.

Upvotes: 1

Johan
Johan

Reputation: 19082

You were almost right, just move the nth-child from img to th like this: table#OppPracticeOverview tr th:nth-child(5) img

Demo: http://jsfiddle.net/G79X9/1/

Upvotes: 3

SpliFF
SpliFF

Reputation: 39014

I doesn't work because none of your th have 5 images. I think you want

table#OppPracticeOverview tr th:nth-child(5) img {...}

Upvotes: 0

Related Questions