How would I select this with CSS? - html

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!

Related

how to target an element child in css

Hello everyone in my case I want to target the 3 element for example, and I have the tags different, the 3 element can be p or div or something else, so I want to just target the 3 element what ever it is, i want to select always the 3 element.
Can I do that with CSS, if any help?
For example :
<div>
<p></p>
<span><span>
<div></div> //3 element here is div
<a></a>
</div>
Or :
<div>
<div></div>
<span><span>
<p></p> //3 element here is p
<a></a>
</div>
If you would always have 4 tags, and want to target first 3,
div > *:not(:last-child){
background-color: red;
}
<div>
<p>AAAAAAAAAAAAAAA</p>
<span>AAAAAAAAAAAAAAA</span>
<div>AAAAAAAAAAAAAAA</div>
<a>AAAAAAAAAAAAAAA</a>
</div>
You could also target first 3 elements like below,
div > *:nth-child(-n+3){
background-color: red;
}
<div>
<p>AAAAAAAAAAAAAAA</p>
<span>AAAAAAAAAAAAAAA</span>
<div>AAAAAAAAAAAAAAA</div>
<a>AAAAAAAAAAAAAAA</a>
</div>
if you only want to select first three child of a parent div(or any other element), you can do something like this,
.parent:nth-child(1),
.parent:nth-child(2),
.parent:nth-child(3){
//Your styles
}
Above code would select 1st, 2nd and 3rd child of the parent div to which i gave a class of parent.
Also, if you want to select all the child of that parent div you could simply do as,
.parent > *{
//Your styles
}
this code would select all the child of the .parent div

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

Identify div through css

I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}

CSS select first child if it's a certain tag

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

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