CODEWITHSUNDEEP
csscss-selectors
lhwparis
lhwparis

Reputation: 230

Why is :not(>h1) not possible? Any workaround in pure CSS?

I have to set a margin to a <p> following a selector depending on a child(h1) element from the selector. Something like this:

selector:not(>h1) + p
{
    margin: 10px 0 0 0;
}

HTML:

<a><h1>test</h1></a>
<p>test</p>

<a> is my selector and it (or the following p) should get a margin only if the a contains a <h1>. and no its NOT possible to set the margin to the h1.

This did not work: is there any way to do this in pure CSS? I think this is a missing thing in CSS3 selectors.

Upvotes: 0

Views: 914

Answers (2)

Mark Entingh
Mark Entingh

Reputation: 681

There is absolutely no way of making your selector work without using jQuery ':has', and in that case, I would write this query:

$('selector > p:not(selector > p:has(h1))');

if nested functions even work in jQuery

The reason why CSS cannot work is because there is no :has function, and :contain is depricated.

Upvotes: 1

csswizardry
csswizardry

Reputation: 591

Your question/example aren't too clear I'm afraid but it sounds like you're describing a 'parent' selector, whereas CSS currently only works on children/descendants. I believe there is work in the pipeline for a parent selector but until then it's not possible I'm afraid.

If I have understood you correctly, sounds like you're talking about something like http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

H

EDIT:

Again, I can't really tell what you're after, but try something like this perhaps:

<h1><a></a></h1>

h1 a{
    display:block
    margin-bottom:20px; /* Adjust as necessary */
}
h1 + p{
    margin-top:-20px; /* Same as above */
}

Upvotes: 1

Related Questions