Sibling Selector Selecting child elements? [duplicate] - html

This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed last year.
<p>hello
<div>test</div>
</p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
I have the following code and when I use the following styles I get the following.
p + div {
color:orange;
}
It styles the div inside the p, and I thought that it's only supposed to style siblings immediately after on the same level? What's weird is if I do the following
div + p {
color:orange;
}
it does not style the p inside the div tag as shown.
Does anyone know what's going on?

Your HTML markup is invalid. <div> cannot be placed inside <p> so the browser fixes the markup by changing this:
<p>hello
<div>test</div>
</p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
... into this:
<p>hello</p>
<div>test</div>
<p></p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
Now p + div matches test and yo. And hi inherits the parent's color.

Your code is broken when you put div inside p tag.
so <div>test</div> is considered as adjacent to p and applied orange color.
and <div>yo<p>hi</p> </div> is considered as adjacent to another p and applied orange color.
For more clarity, See the below DOM structure that has been created using above code.

Related

CSS :last-child selector being ignored by last child [duplicate]

This question already has answers here:
How can I correctly select the first or the last child with CSS?
(2 answers)
Closed 2 years ago.
HTML:
<body>
<h1>First heading</h1>
<h1>Second heading</h1>
</body>
CSS:
h1:last-child{
color: blue;}
So the problem is that the last h1(Second Heading) is not getting styled, although it`s the last child of its parent(body). This issue occurs with "a" and other tags too, but work perfectly fine with "p".
Try Enclosing your H1 tag within a div
h1:last-child{
color:blue;
}
<body>
<div>
<h1>First heading</h1>
<h1>Second heading</h1>
</div>
</body>
The problem is that in your HTML or IDE, the second h1 is not the last child.
Here's how it looks in jsFiddle:
The body element has four children, and the last child is a script element.
So to make it work, you would have to remove all other elements or, in this case, select the third from the last child. jsFiddle demo

CSS - select children of a tag until next tag of same type [duplicate]

This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
I have a following DOM:
<div class="someclass">
<p>
<p>
<span></span>
</p>
</p>
<div>
<p>
<span></span>
</p>
</div>
</div>
I need to apply a stylesheet to span tags which are under the div with someclass class, but NOT to span tags which are under nested div.
There might be any other hierarchy of tags among them and span tags might be nested among any tags (except div). And using > will not help.
Can you give me a selector to select them?
You can use immediate child > to accomplish this. You can also use the * selector along with negation to accomplish non-div nesting look-ups.
.someclass > p,
.someclass *:not(div) p {
background-color: yellow;
}
<div class="someclass">
<p>Highlight me</p>
<section><p>Also hightlight me</section>
<section>
<section>
<p>Also hightlight me
</section>
</section>
<div>
<p>Do not highlight me</p>
</div>
</div>

Is it possible to combine more CSS combinators? [duplicate]

This question already has answers here:
CSS Selector for Adjacency
(2 answers)
Closed 7 years ago.
I am trying to select every first paragraph element that follows a header element (e.g. h2). However, due to wrapping in divs, I end up selecting several "first" paragraph elements. Is it possible to select only the paragraph element that follows with CSS combinators? My HTML is like this:
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
This CSS ends up selecting the first as well as what I intended to be fourth paragraph:
p:first-of-type{
text-indent: 0;
}
So I tried with CSS like this:
div * h2 + div * p:first-of-type{
text-indent: 0;
}
But it doesn't work. So is it even possible to combine the descendant selector with the general sibling selector like that?
div * h2 + div * p:first-of-type
That means:
A p which is the first p in its container and which is a descendant of any element which, in turn, is a descendant of a div, which is a sibling of an h2 which is (etc etc).
In your HTML, the div is not a sibling of the h2.
Your problem is that you first need to select the div which is the parent of the h2 and then chain the rest of your selector from there. This isn't possible because CSS doesn't have a parent selector.
You cannot select a childelement from another childelement when they are not siblings or conncted by a hirachy.
You can use this selector, it will select the paragraph you want, but only if your HTML structure stays like you defined it:
div:nth-of-type(2) > div > p:first-child
The best solution would be to give you elements classes and ids. It is best practice to use as less rules as possible in CSS. Rules make the page slower...
Can you edit the html? A couple more selectors could fix this.
<div class="mainContainer"> <!-- new div -->
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
</div> <!-- new div -->
Then with something like:
.mainContainer div:nth-of-type(2) p:first-child { /* css here */ }
You should be able to style just the first paragraph this way, by targeting the first paragraph inside the 2nd "sub" div.

How would I select this with CSS?

Lets say I have the following..
<div>
<div>
<div>
<div></div> <<<Select this one..
<div></div> <<<Not this one..
<div></div> <<<Select this one..
<div></div> <<<Select this one..
</div>
</div>
</div>
How would I select those 3 divs without adding any classes or ids? Is this even possible?
You can use the :not() and :nth-child() pseudo-classes.
div > div > div > div:not(:nth-child(2)){
color: red;
}
<div>
<div>
<div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
</div>
</div>
Demo in jsFiddle
Note: For ie8 support, you could use the same selector in jQuery and style your element that way.
$("div > div > div > div:not(:nth-child(2))")
.css("background-color", "yellow")
<div>
<div>
<div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
</div>
</div>
<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If you need to support IE7 you can use:
div > div > div > div + div + div,
div > div > div > div:first-child {
color: orange;
}
http://jsfiddle.net/4TYcb/1/
div div div :not(:nth-child(2))
will select just those divs
If you need a solution that also works for older IEs you have to think a bit different than supposed by most of the answers so far.
Style all DIVs that are the third child:
div > div > div > div {/* styles for all 4 DIVs */}
And then change the second one back:
div > div > div > div:first-child + div {/* styles only for the second DIV */}
See jsFiddle
But as already written in my comment on your question, your HTML markup is highly "questionable".
PS: The difference to #Adrift's answer is, that the second rule selects the second DIV. IMHO this is more useful in practice rather than to exclude an element. It is also "more robust" just in case another element than a DIV will be inserted.
As you just wrote that this is not what you are looking for, here is another option to achieve "what you are looking for"!
In your case you could also use the :nth-of-type() selector, instead of the :nth-child() one - see Fiddle
As you see there is a whole bunch of options. You should take the time and try to understand all these different approaches to be able to decide which one will fit your needs best!

Difference between these two CSS selectors [duplicate]

This question already has answers here:
Are "div > p" & "div p" same?
(2 answers)
What’s the difference between the CSS selectors “div p” and “div > p”? [duplicate]
(5 answers)
Closed 9 years ago.
What is the difference between the selectors div.red > p and div.red p?
Please point to the key difference between these CSS selectors.
HTML
<div class="red"><p></p><div class="blue"><p></p></div>
Does the first selector select only the first <p> element?
div > p
This will select only p elements that are a child of div
div p
This will select all descendent (i.e. children, children's children etc) p elements of a div
See here for more info.
The easiest way of explaining that is to just make a simple DEMO.
HTML
<div id="id">
<p>First text</p>
<div>
<p>Second text</p>
</div>
</div>
CSS
div#id > p { background: red; }
div#id p { color: green; }
Only the first text has red background, because > takes only p that is direct child of div#id. The second one is not matched because there is another div between div#id and p.
However, they both are green, because div#id p matches all p that are descendant to div#id, no matter how deep in the Document Object Model.
The first selector says "All p tags that are a direct child of div". The second says "All p tags inside of div, regardless of whether they are children, grandchildren" and so on.
Consider the following HTML:
<div>
<p>1</p>
<p>
<p>2</p>
<p>3</p>
</p>
<p>4</p>
</div>
<p>5</p>
div > p will only select direct descendants: 1, 4 and the one with the p elements nested in it.
div p will select all p tags within a div: 1 2 3 4.