Given the following, is there a way to target an element ONLY if it is an h3 AND it is positioned immediately inside the parent?
<style>
h3:first-of-type { color: #f00; }
</style>
Example a)
<div class="mydiv">
<h3 class="tobetargeted"></h3>
</div>
Example b)
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted"></h3>
</div>
Neither first-of-type or first-child will work because in both cases, the h3 element evaluates to true. What I want is for Example a) to be true but Example b) to be false.
So... IF the element is an H3 AND it is the first element immediately inside the parent.
Any ideas?
:first-child should definitely work out for you.
.test {
border: 1px solid black;
margin: 0 0 10px;
}
.test h3:first-child {
color: red;
}
<div class="test">
<h3>H3 - should be red</h3>
</div>
<div class="test">
<p>p</p>
<h3>H3 - should be black</h3>
</div>
Use this
h3:nth-child(1) { color: #f00; }
h3:nth-child(1) { color: #f00; }
<div class="mydiv">
<h3 class="tobetargeted">Hello</h3>
</div>
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted">Hello</h3>
</div>
Related
This question already has answers here:
Select first Descendant with CSS
(5 answers)
Closed 2 years ago.
I don't have control of the html structure, so for example if I have this structure:
<body>
<div class="red"> <------ style this
<div>content</div>
<div class="red">
<div>
<div class="red">content</div>
</div>
</div>
</div>
</body>
I want to style only the first decendant with the red class..
:not(.red) > * > .red {
background: red;
}
<div class="red">
<div>red</div>
<div class="red">
<div>
<div class="red">red</div>
</div>
</div>
</div>
I have tried following this answer https://stackoverflow.com/a/12922863/2894798 with no results if you inspect the dom in my example you will see that the second decendant with the red class, also has the red style..
Do note that I am trying to select first decendant not first sibling
First you target all elements that have the .red class. Then you unset it from all childs having also this class.
.red {
background: red;
}
.red .red {
background: none;
}
You can use > CSS selector to target only first element without overwriting any properties.
body > .red { border: 1px solid red; }
div { padding: 5px; }
body > .red { border: 1px solid red; }
<body>
<div class="red"> style this
<div>content</div>
<div class="red">
<div>
<div class="red">content</div>
</div>
</div>
</div>
</body>
Question
I want to apply a style to the last child of an element that is NOT of a certain type.
Please do not confuse with: the last element IF it is not of a certain type.
Example
<div class="container>
<div>Child 1</div>
<div>Child 2</div>
<span>Child 3</span>
<template></template>
<span>Child 4</span>
<template></template>
</div>
In this case I want to apply the style to the last element that is not of type <template> (would be Child 4 in this case).
Please be aware that :nth-last-child(2) is not applicable, because there could be potentially more <template> elements.
What I tried (and did not work)
.container > :not(template):last-child {
// Style here
}
.container > :last-child:not(template) {
// Style here
}
Thank you already!
EDIT - It seems my question was to abstract, so I will be more concrete.
I want to have a generic spacing class (Applying this to a container will simply add a space between the items):
.vertical-spacing>* {
margin: 20px 0;
}
.vertical-spacing> :first-child {
margin-top: 0;
}
.vertical-spacing> :last-child {
margin-bottom: 0;
}
/* For better visibility of example */
.vertical-spacing {
background: #ff0000
}
.vertical-spacing>* {
background: #00ff00;
}
<div class="vertical-spacing">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
I am doing a project in Polymer 3.0 where you can use a conditional template that will be visible only under certain conditions:
<template is="dom-if" if="condition">
<div>Content</div>
</template>
If the <template> is the last child in the spacing container (or multiple templates are the last children, number is not fixed) and the condition is false, the result is that the content of the <template> is hidden, nevertheless the <template> element itself is still present. By consequence there is a useless space at the end of the container:
.vertical-spacing>* {
margin: 20px 0;
}
.vertical-spacing> :first-child {
margin-top: 0;
}
.vertical-spacing> :last-child {
margin-bottom: 0;
}
/* For better visibility of example */
.vertical-spacing {
background: #ff0000
}
.vertical-spacing>div {
background: #00ff00;
}
<div class="vertical-spacing">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
<temlate>
<div style="display: none">Content</div>
</temlate>
</div>
<div style="background: #0000ff; color: white">Stuff after container: there is a margin on top as you can see</div>
I now want to be able to apply the style that removes the margin to the last element in the container that is not a <template>.
.vertical-spacing>* {
margin: 20px 0;
}
.vertical-spacing> :first-child {
margin-top: 0;
}
.vertical-spacing> :last-child {
margin-bottom: 0;
}
/* For better visibility of example */
.vertical-spacing {
background: #ff0000
}
.vertical-spacing>* {
background: #00ff00;
}
.vertical-spacing > *:last-of-type {
margin-bottom:0;
}
span{
display:inline-block;
}
<div class="vertical-spacing">
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
<p>'p' tag child </p>
<span>'span' tag child </span>
<div>Child 3</div>
<span>'span' tag child </span>
<template>
<div style="display: none">Content</div>
</template>
</div>
<div style="background: #0000ff; color: white">Stuff after container: there is a margin on top as you can see</div>
Simply write
.vertical-spacing > *:last-of-type { margin-bottom:0;}
I think this will solve your margin issue.
You can use the CSS pseudo-class :last-of-type :
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
jsfiddle: https://jsfiddle.net/y21qL8jz/
here is an example what you are asking I guess, to see the result I put a div in the end, please remove the div and you will see that its not affecting the span, You can put your template in place of span in CSS, Remove and add div to see the results
.container > *:last-child:not(span) {
font-size: 48px;
color:red;
}
<div class="container">
<div>Child 1</div>
<div>Child 2</div>
<span>Child 3</span>
<div>Child 2</div>
<span>Child 4</span>
<br>
<span>dwdw</span>
<div>atul</div>
</div>
Check out this article that neatly explains the difference between :nth-child and :nth-of-type which is probably the reason :last-of-type will work but :last-child will not.
:nth-of-type looks at any and all child elements of a parent but :nth-child works a bit differently and doesn't always work if you have different types of child elements like you do here.
Hope this helps :)
you may try:
span:last-of-type {
color:red;
}
In CSS, I select "first-child". I want only <div class="b">1</div> on red background. I don't understand
div {
height: 50px;
margin-bottom: 10px
}
.a .b:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</div>
</div>
.a .b:first-child means any .b:first-child that is a descendant of .a. Space is the descendant combinator; it doesn't link :first-child to .a in any way.
You want a direct child of .a, using the child combinator: .a > .b.
I think you want your first-child pseudo-class on .a, not .b.
div {
height: 50px;
margin-bottom: 10px
}
.a:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</div>
</div>
I have a nested structure that contains the same elements. To only target the elements within the current set I do something like this:
.set1 > .content > .trigger {
background: red;
}
In real life this selector has much more elements. While it works, if I change the name or depth on one of the elements it will no longer work.
Is there a way to just find the .trigger (in this case) of the current set?
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
<div>
</div>
<div>
You can apply a style on all triggers inside the current set and then remove the style for the other triggers that comes after the first trigger.
div {
padding: 5px;
border: 1px solid;
}
.set1 .trigger {
background: red;
}
.set1 .trigger ~ .set .trigger {
background: none;
}
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
</div>
</div>
</div>
Need help guys I have this HTML code:
<div class="editable">
<div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
</div>
</div>
I want to select the last .col1of5 through css how can I do that?
Use this CSS to get the last child :
.parentDiv .col1of5:last-child {
/* CSS */
}
I just saw your HTML.
Here is the solution. refer this fiddle.
The HTML
<div class="editable">
<div>
<div class="column col1of5">1</div>
<div class="column col1of5">2</div>
<div class="column col1of5">3</div>
<div class="column col1of5">4</div>
<div class="column col1of5">5</div>
</div>
</div>
The CSS
.editable div {
background: none repeat scroll 0 0 #292929;
color: white;
list-style: none outside none;
padding-left: 0;
width: 200px;
}
.editable div div {
border-bottom: 1px solid black;
border-top: 1px solid #3C3C3C;
padding: 10px;
}
.editable div div:first-child {
border-top: medium none;
}
.editable div div:last-child {
border-bottom: medium none;
color: red;
}
Hope this helps.
Try this:
.col1of5:last-child {
/* my CSS rules */
}
:last-child is a pseudo selector and it points to the element that is the last child element of a certain node. It may sound logical enough but it can be confusing, since you may think it should be .editable:last-child. You should apply the selector to the child element itself, not the parent.