I have div1 in this I have more <div>s and <p>s and I only want to select the <p> in this <div> and not in the other divs
I tried the CSS :last-child selector, but it selected also the last <p>s in the other div.
How can I do that?
This is a sample of my code:
<div id="div1">
<div class="div2"><p>text</p></div>
<div class="div3"><p>text</p></div>
<div class="div4"><p>text</p></div>
<p>select only me</p>
</div>
You want to use the immediate children (>) selector along with the :last-child pseudo-class. This selects only p elements that are "first-level" (not nested) children of #div1 and then selects only the last of those elements. See below:
#div1 > p:last-child {
color: red;
}
<div id="div1">
<div class="div2"><p>text</p></div>
<div class="div3"><p>text</p></div>
<div class="div4"><p>text</p></div>
<p>select only me</p>
</div>
You can do:
#div1 p {
}
Which wil select all the paragraph tags that are direct children of the div1
You might be running into a general "any div's last p child" situation instead of specifying with a class.
Make a unique class for the outer, containing div to then use last-child styling on.
Try this
#div1 p:last-child {
}
If you want to select the last div, and then any p inside of that div:
div:last-of-type p {background:green;}
If you want to select the last p in any div:
div p:last-of-type {background:red;}
If you want to select the last p in last div:
div:last-of-type p:last-of-type {background:blue;}
Just give your p a class or id like <p class="blablabla">blablabla</p> or <p id="blablabla">blablabla</p> and in CSS you do:
.blablabla{
#things you want to do in CSS with class
}
or
#blablabla{
#things you want to do in CSS with id
}
Related
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
To get the last p to have no margin, you could do last-of-type, however this doesn't work once you start having p nested within other divs.
Is it possible to have specific css for the last p within a specified class?
For example:
<div class="my-container">
<div class="banner-message1">
<p>1</p>
</div>
<div class="banner-message2">
<p>2</p>
</div>
</div>
To specifically make it so that the <p>2</p> has certain styling, but not the <p>1</p>
The css of div.my-container p:last-of-type would seemingly apply to both <p>1</p> and <p>2</p> since they are the last p within the parent div (in this instance banner-message1 and banner-message2)
https://jsfiddle.net/hygzq3ab/
Here's a jsfiddle, which has both a margin-bottom on the last p tag and then also padding of the container, so that the last p element looks essentially like it has a double bottom margin. last-of-type does not seem to work since it is contained within other div classes.
Example code for that would be div.my-container p:last-of-type { margin-bottom:0; }
If the <p> is always contained in a <div> then you could target that paragraph with
.my-container > div:last-of-type p {
margin-bottom: 0;
}
You need to target the paragraph inside the last div (also :last-child instead of :last-of-type would work as well in this specific example).
But if your last <p> is not always contained in a <div> then you could target it with
.my-container > div:last-child p,
.my-container > p:last-child {
margin-bottom: 0;
}
Here you must use :last-child instead of :last-of-type or — in case the last <p> is not wrapped in its own <div> — you will also target the paragraph contained in the last <div>
Is this what are you asking for?
html (your fiddle does have alot same ids of same element)
<div class="my-container">
<div class="banner-message">
<p>
1
</p>
</div>
<div class="banner-message">
<p>
2a
</p><p>
2b
</p>
</div>
<div class="banner-message">
<p>
aaa
</p>
</p>
<p>
3
</p>
</div>
</div>
and css:
.banner-message:last-child p:last-child {
color: red
}
Should do the trick
You also should use that: last:child
.my-container > div:last-child p {
margin-bottom: 0;
}
I want to add specific style property on all child elements of this .feature-section-heading class. I know i can do that using below trick
.feature-section-heading > h1 {...}
But above logic will implement on just h1 tag. So is there possible that i can add style property on all child elements? I searched about that and find accepted answer, but it does not work.
Use a universal selector instead of a type selector.
.feature-section-heading > *
CSS
.feature-section-heading > * {...}
You can use the * as all element selector.
You Can use * (Asterik Selector)
Here is the Demo
CSS
.foo *{background:red}
HTML
<div class="foo">
<span>1</span>
<p>2</p>
<div>3</div>
</div>
Access All childrens with Css * selector as in code snippet below:
.feature-section-heading > * {
background: red;
}
Please find the jsfiddle link that illustrates the desired behavior.
HTML
<div class="feature-section-heading">
I am parent div
<br />
<h1>
Heading
</h1>
<div>
Child DIV
</div>
<div>
Child DIV
</div>
<p>
Child paragraph
</p>
<p>
Child paragraph
</p>
<p>
Child paragraph
</p>
<span>
Child span
</span>
</div>
CSS
.feature-section-heading {
color: red;
}
.feature-section-heading > :not(:empty){
color: darkgreen;
}
What I'm trying to achieve sounds really simple, but is not. I don't even know if I can accomplish what I'm trying todo.
Ok so we got our element with the classname .parent, .parent got two div children, one is immediate and the other one is put into the first one like so:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
Targeting the first child should be as simple as:
.parent > div {
color: green;
}
but it isn't, as "Second child" also get affected.
Is this achieveable?
Sidenote:
Some CSS-properties like "color" is inheriting from parents, even though the element does not got the direct style. I guess this is what causing the issue. But still, I don't want it to cascade.
Parent element color is inherited to children element. First set div color and then use direct children's color:
.parent div{
color: #000;
}
.parent > div {
color: green;
}
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
The css is in cascade so the changes you do to an element effect the children. You could, however put a css class to the second child to override the css.
When you use div > p it means that Selects all p elements where the parent is a div element
But if you set one element with a property, all children will inherit that property if you don't override it. For example:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
In your case, all divs will have the property color:green by inheritance. If you want to change the property of the second div you have to do the following: div.parent div div { color: red }. This means Select all div which parent is a div which parent is a div with class "parent".
This is how stylesheets work.
No, you can't.
CSS color property is Inherited by default.
It's not possible to do it in the way you want.
But more important: It's not an ISSUE, it's the way that supposed to be.
Remember: CSS => Cascade Style Sheet.
Now, for your question... the simple, easy and the right way to "solve" this... is the one that already told you #Bhojendra Nepal in his previous answer.
Edit:
Another option would be wrapping that flying text in a span tag.. or similar:
.parent > div > span {
color: green;
}
<div class="parent">
<div>
<span>First child</span>
<div>
<span>Second child</span>
</div>
</div>
</div>
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