Relationship with a sister who has a specific class

Question

Not sure if this is possible in css , but what I wanted to do was

Say you have an html structure as shown below: -

 <h4>Title <span class="specific"> text </span> </h4> <div> <p> This is some text. </p> </div> 

Now I want to stylize div p elements, but I want to use h4 span.specific as a relation for div p element.

Using brackets, it might look like this. (h4 span.specific) ~ (div p)

I just wanted to know if this could only be done with CSS.

Answer 1

Unfortunately, no, the selector consists of the relationships between the individual elements (+ pseudo-classes). You would like to have a relationship between selectors, which is impossible as it is today and will not be in CSS4.

The problem is that if you passed in the DOM tree using CSS, there is simply no way to go (other than defining a selector selector object ! ), So it is impossible to create such a relation.

To fix this, you should be able to recognize h4 > span.specific without looking at span , for example, apply a class to h4 .

References:

• http://dev.w3.org/csswg/selectors4/#overview
• http://www.w3.org/TR/css3-selectors/#selectors

Answer 2

CSS is really powerful and will help you with this.

Instead of (h4 span.specific) ~ (div p) use

 h4 > span.specific + div > p 

Hope this helps.

Edit:

you cannot specify span.specific, however you can say p inside the div followed by h4, i.e.

 h4 + div > p. 

Sorry for the confusion.

Answer 3

The brackets are invalid. CSS selector operator.

The sequence of selectors and combinators is read from right to left.

 <h4 class="specificParent">Title <span class="specific"> text </span> </h4> <div> <p> This is some text. </p> </div> 

CSS

 h4.specificParent~div>p { background-color: red; } 

He interprets the above statement as

Select a p element that has a parent div that is sibling h4, which has a specific Parent class

Below is a working demo: Demo

Answer 4

you can achieve this only by this

i cannot find any other solution for this

http://jsfiddle.net/8QBkz/

 h4 ~ div p{ color:green }