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, Jul 16 '12 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, Jul 16 '12 at 14:24

JohnC · Answer 1 · 2020-11-11T14:02:06.590

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.

score 1 · Accepted Answer · answered Jul 16 '12 at 14:54

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

score 1 · Answer 3 · answered Jul 16 '12 at 14:55

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 '12 at 14:55

Christian Benincasa

1,215
1
21
45

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/](http://selectivizr.com/) – Christian Benincasa Jul 16 '12 at 15:00
1

Or `tr:first-child + tr td:first-child + td`. – BoltClock Jul 16 '12 at 15:01
@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 Jul 16 '12 at 15:03
@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 – Nicholas King Jul 16 '12 at 15:05
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? – Christian Benincasa Jul 16 '12 at 15:06
@Nicholas King: Huh? My comment uses CSS2.1 selectors too (`:first-child` and adjacent sibling `+`). No CSS3. Same browser support as `>`. And both `+` and `>` work [vastly differently](http://stackoverflow.com/questions/11493561/difference-between-ef-and-ef-selectors) - you don't just use either one or the other. – BoltClock Jul 16 '12 at 15:08
@BoltClock sorry my comment wasn't clear i agree with you that your solution would work using the + and :first-child selectors but id still use the > selector as its clearer and achieves the goal that the user wants. As mentioned div.PageHeaderDescription div table tbody tr td img styles all images and not just the one under the td so just use > – Nicholas King Jul 16 '12 at 15:14

styling specific elements using XPATH and CSS

3 Answers3