CODEWITHSUNDEEP
csscss-selectors
s4nji
s4nji

Reputation: 455

Selecting an element that has a specified element

I am a style maker of an addon called Stylish that allows you to append your own stylesheet to change the site user interface. Now, I have a problem,

Could I select an element that has a specified element?

Example :

<div class='visitor_message'>
<div class='user_info'> Visitor Message Poster Info </div>
<div class='deleted_message'> This message is deleted by foobar </div>
</div>
<div class='visitor_message'>
<div class='user_info'> Visitor Message Poster Info </div>
<div class='message'> Undeleted Content </div>
</div>

I am working a style on vBulletin to remove an element, that contains an element with class deleted, so soft messages will get removed completely. If I just hide .deletedmessage, it will still leave the info bar behind.

So straight to the point, Is it possible to select an element that has a specified element?

I want to choose .visitor_message that contains .deletedmessage, is it possible? If it is, how? If it isn't, can someone explain how to do it on jQuery or javascript?

Upvotes: 3

Views: 87

Answers (1)

Su&#39;
Su&#39;

Reputation: 2166

As far as CSS, you're basically asking for an "ancestor selector." There's no such thing up through at least CSS3. The very rough explanation is that CSS generally looks "in" and not out. I recall reading somewhere that allowing selectors to look at parents/ancestors would also have a significant performance impact, but can't provide a citation at the moment.

With jQuery, you'd use .has() to achieve this:

$('.visitor_message').has('.deletedmessage')

(Note I'm showing you the selection bit only there.)

Upvotes: 3

Related Questions