CODEWITHSUNDEEP
cssxpath
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

styling specific elements using XPATH and CSS

I want to target the following item:

/html/body/div[2]/div/div[5]/div/table/tbody/tr[2]/td[2]/img

how can i style this exactly?

Currently i have this css which seems to apply the style to all img inside the div

div.PageHeaderDescription img {
    border-radius: 7px 7px 7px 7px;
    bottom: 10px;
    float: none;
    height: auto;
    margin-right: 10px;
    position: relative;
    right: -230px;
    width: 614px;
}

Upvotes: 2

Views: 7117

Answers (3)

JohnC
JohnC

Reputation: 1387

You can use

div.PageHeaderDescription img:first-child {
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;

} To just access the first image or

    div.PageHeaderDescription > img {
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;

} To only access images within the PageHeaderDescription div.

Upvotes: 2

Christian Benincasa
Christian Benincasa

Reputation: 1215

You could specify specific child nodes using the nth-child pseudo-class.

div.PageHeaderDescription div table tbody tr:nth-child(2) td:nth-child(2) img

nth-child MDN Reference

Upvotes: 1

Nicholas King
Nicholas King

Reputation: 938

use this 

div.PageHeaderDescription div table tbody tr td > img
{
border-radius: 7px 7px 7px 7px;
bottom: 10px;
float: none;
height: auto;
margin-right: 10px;
position: relative;
right: -230px;
width: 614px;
}

this will apply only to images inside the td

the > symbol is used to specify direct descendant

http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/

it has pretty good support in modern browsers too :-)

Upvotes: 1

Related Questions