Difference between these two CSS selectors [duplicate] - html

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.

Related

Is it possible with CSS to target a h1 but only if it's the very first item in a parent? [duplicate]

I need to select a particular element only if it occurs as the first child of a div. Is there a CSS selector that'll handle that case?
For example, I want to select this figure:
<div>
<figure></figure>
<p></p>
<p></p>
</div>
But I don't want to select this one:
<div>
<p></p>
<figure></figure>
<p></p>
</div>
I can't change the HTML, so I can't add a class. I know about the :first-child and :first-of-type selectors, but they don't fit this case by themselves. How can I select the first child only if it's a figure?
You could use CSS :first-child selector with descendant selector like this:
JSFiddle - DEMO
div figure:first-child {
color:red;
}
OR: with CSS > child selector (as suggested by #Alohci)
DEMO
div > figure:first-child {
color:red;
}
I don't see any issue with figure:first-child selector. It would select the <figure> element only if it is the first child of its parent.
While :first-child represents any element which is the first child in the children tree of the parent, the figure part would limit the selector to match an element only if it is a <figure>.
have you tried the following?
div figure {
color: green;
}
div figure:first-child {
color: blue;
}
figure:first-child will select all the figures that are first child of a parent.
Check this example at W3C.
Use div figure:first-child selector.
Here is example
<div>
<figure>test</figure>
<p>div 1 pgraph1</p>
<p>div 1 pgraph1</p>
</div>
<div>
<p>div 2 pgraph1</p>
<figure>test 2</figure>
<p>div 2 pgraph1</p>
</div>
CSS:
div figure:first-child{
border:1px solid red;
}
It will apply red border only to first child.
Please refer to fiddle for 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>

Select tag which meets a condition [duplicate]

This question already has an answer here:
Find tags using css selector but not their descendants
(1 answer)
Closed 7 years ago.
I'm quite new in css selectors and I'm trying to do this:
I have a html with multiple divs. I want to select the first div meeting some condition, let's say div[id*='ample'] and then, select all divs with the same condition, but not the first divs children.
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>
So the thing I want is to get the div whose id='example1' and id='example3'.
The best would be if for example the div with id='example3' doesn't have to be the first divs brother.
Do you know how to do that?
I was thinking about:
div = css_select("div[id*='ample')")
while True:
divs.append(div)
div = div + css_select("div[id*='ample')")
But it's probably worthless.
You have many ways to select elements in JavaScript, it's depends on the html.
Back to your question: you can do it by using the parent of those divs (the body for example)
NodeList.prototype.forEach = Array.prototype.forEach;
/* 'body > *[id*="ample"]' - you can replace the 'body' selector with other parent selector */
document.querySelectorAll('body > *[id*="ample"]').forEach(function(el) {
el.classList.add('red');
});
div {
height:10px;
border:1px solid #000;
}
.red {
border:1px solid red;
}
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</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.

Is there a CSS selector for the first direct child only?

I have the following html
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
And the following style:
DIV.section DIV:first-child
{
...
}
For some reason that I don't understand the style is getting applied to the "sub contents 1" <div> as well as the "header" <div>.
I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?
What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.
It is unclear to me whether you want both children of the main div or not. If so, use this:
div.section > div
If you only want the header, use this:
div.section > div:first-child
Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.
Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.
Found this question searching on Google. This will return the first child of a element with class container, regardless as to what type the child is.
.container > *:first-child
{
}
CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, will select just the direct child of the parent, but its rules will be inherited by that div's children divs:
div.section > div { color: red }
Now, both that div and its children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:
div.section > div { color: red }
div.section > div div { color: black }
Now only that single div that is a direct child of div.section will be red, but its children divs will still be black.
The CSS selector for the direct first-child in your case is:
.section > :first-child
The direct selector is > and the first child selector is :first-child
No need for an asterisk before the : as others suggest. You could speed up the DOM searching by modifying this solution by prepending the tag:
div.section > :first-child
Use div.section > div.
Better yet, use an <h1> tag for the heading and div.section h1 in your CSS, so as to support older browsers (that don't know about the >) and keep your markup semantic.
div.section > div
Not exactly the question asked, but maybe useful:
div.section > :first-child:is(div)
This would match only the first child element of .section and only if it was a div.
Match:
<div class="section">
<div>MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
No match:
<div class="section">
<img ... >
<div>NO MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
This is how I solved when using TailwindCSS (v3.1) with arbitrary variants.
I only wanted the first column in table to be underlined when hovered, as it is a link.
[&>:first-child]:hover:underline