0

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
lhwparis
  • 230
  • 1
  • 9
  • 2
    What exactly are you trying to do? `selector:not(>h1)` doesn't make any sense. What do you mean by "a p following a selector depending on a child element from the selector"? – BoltClock Feb 20 '12 at 16:55
  • I'm guessing that you want to select all elements that (don't) have a H1 child element. Such a selector doesn't exist in CSS. (jQuery has `:has()` though, so you could write `$( 'a:not(:has(h1)) + p' )`) – Šime Vidas Feb 20 '12 at 17:02
  • thanks @ŠimeVidas i know that. but i searched for a pure css way. think there is none :( – lhwparis Feb 20 '12 at 17:06
  • 1
    @lhwparis Yes, there is none. Read here: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar – Šime Vidas Feb 20 '12 at 17:07

2 Answers2

1

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.

Mark Entingh
  • 621
  • 6
  • 10
1

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 */
}
csswizardry
  • 591
  • 2
  • 11
  • thanks i am more talking about something like a css :has() selector for css to do something like. selector:has(h1) > p. jQuery has such a selector: http://api.jquery.com/has-selector/ . thanks for your answer – lhwparis Feb 21 '12 at 10:36