CODEWITHSUNDEEP
csscss-selectorsconditional-statements
Halil Ibrahim
Halil Ibrahim

Reputation: 1369

Css selection dependent on different selector's condition

Is it possible to define css class behaves dependent to an other css class?

For example; when

a:hover

Then I want to set 

p {background:#fff;}

Is this possible with pure css?

Edit: Assume that no nested relation exist.

Upvotes: 1

Views: 398

Answers (4)

Marc Lloyd
Marc Lloyd

Reputation: 304

If the <p> tag immediately follows the <a> tag then you could use the adjacent sibling selector e.g.

a:hover+p{
    background:#fff;
}

This is supported in IE8+

Upvotes: 0

Four_lo
Four_lo

Reputation: 1150

I do not see why you would be limited to these restrictions with a littl creativity. if you use fixed positioning the descendant can overlap its parent. and still respond like a descendant.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723739

If you mean you want all p to have that style when a:hover regardless of where they are in the DOM, then no, you can't do that. You'll need to use a script to apply the style (or some class containing that style) to the p elements when a receives a hover.

Upvotes: 2

Luca
Luca

Reputation: 9715

if you have a structure like this:

<a><p>...</p></a>

then this:

a:hover p {background: #fff;}

will work. However, block elements should not be placed inside inline elements (in this case, no <p> inside <a>

if your markup is valid, and looks like this:

<p><a>...</a></p>

then you could have 

p:hover {background: #fff;}

but a descendant can't affect the parent css (unless you use javascript) while the opposite is true (parent css affects descendants)

Upvotes: 2

Related Questions