styling specific elements using XPATH and CSS

Question

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;
}

You mean you want to convert that XPath into a CSS selector for your stylesheet? Also, which div is div.PageHeaderDescription? It doesn't say in your XPath. — BoltClock
– BoltClock, Commented Jul 16, 2012 at 14:22
i already know the css path, div.PageHeaderDescription div table tbody tr td img but this applies the css to all images. — SOLDIER-OF-FORTUNE
– SOLDIER-OF-FORTUNE, Commented Jul 16, 2012 at 14:24

JohnC · Accepted Answer · 2020-11-11 14:02:06Z

2

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.

edited Nov 11, 2020 at 14:02

answered Jul 16, 2012 at 14:57

JohnC

1,38712 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas King · Accepted Answer · 2012-07-16 14:54:59Z

1

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 :-)

answered Jul 16, 2012 at 14:54

Nicholas King

9387 silver badges22 bronze badges

Comments

Christian Benincasa · Accepted Answer · 2012-07-16 14:55:55Z

1

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

answered Jul 16, 2012 at 14:55

Christian Benincasa

1,2151 gold badge22 silver badges45 bronze badges

7 Comments

Christian Benincasa Over a year ago

You could use this conditionally for IE6-8, if you can't add any other sort of specifier for that particular img http://selectivizr.com/

BoltClock Over a year ago

Or tr:first-child + tr td:first-child + td.

Nicholas King Over a year ago

@ChristianBenincasa selectivizer is good to a point, but if you load content through AJAX for example, the AJAX loaded content loses its style

Nicholas King Over a year ago

@BoltClock solution would work but can be a pain to maintain id go for direct descendant > selector as its better supported being a CSS 2.1 rule

Christian Benincasa Over a year ago

The direct descendent would be good, but if OP needs to style only images that are contained within the second-child td, then wouldn't > fail?

|

Collectives™ on Stack Overflow

styling specific elements using XPATH and CSS

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related