I would like to select with CSS and apply some background color ONLY on the row number 3.
But I have a limitation that I cannot use a css selector which select using a class name.
Could you please point me out to solve this issue? Thanks!
<div class="root">
<div class="row">1
</div>
<div class="row">2
</div>
<div class="row">3
</div>
</div>
You can use
.root>div:last-child {
background: green;
}
<div class="root">
<div class="row">1
</div>
<div class="row">2
</div>
<div class="row">3
</div>
</div>
Use
.root div:last-child {
background: red;
}
.root div:nth-child(1) {
color:red;
}
<div class="root">
<div class="row">1
</div>
<div class="row">2
</div>
<div class="row">3
</div>
</div>
If you plan to select row 3, and decide to add more rows you can use nth-child(3)
div.root:last-child will select every children.
Try this Instead:
div.root div:last-child{
background: green;
}
You can do it in different ways:
.root div.row:last-child {
background:red;
}
.root div.row:last-of-type {
background: green;
}
.root div.row:nth-last-child(1) {
background: yellow;
}
<div class="root">
<div class="row">1
</div>
<div class="row">2
</div>
<div class="row">3
</div>
</div>
Related
This is some html and css that uses flexbox to position an element (colored in yellow). In a large breakpoint it appears in one place but in a small breakpoint it needs to be in a different part of the hierarchy. So it's not as simple as just repositioning its order but actually moving it to a different place.
How can I do this using just CSS and flexbox? If that's not possible then I could use CSS grid. Would prefer not to have to use javascript unless there's no other way.
.one {
background-color: lightgray;
}
.two {
background-color: red;
}
.three {
background-color: blue;
}
.element {
background-color: yellow;
}
<h1>large breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="element">
possible position 1
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</div>
<h1>small breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="element">
possible position 2
</div>
</div>
Pretty sure you can achieve what you want with the order property. Here's an example where an element is in a different order than the order in which it was declared.
You can set the order property in each breakpoint to match your needs.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
border: 0.025em solid black;
padding: 1em;
}
#special-item {
order: 3;
width: 100%;
background-color: yellow;
}
<h1>Large breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
<h1>Small breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div id="special-item" class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
I want to add certain property to a specific <div>, here's my structure:
<div class="container">
<div class="parent">
<div class="child1">
<div class="child2">
</div>
<div class="parent">
<div class="child1">
<div class="child2">
</div>
<div class="parent">
<div class="child1">
</div>
</div>
Now I'm trying to apply css border property on class="child1" except for the last div that has only class="child1". I tried:
.container {
& > div.child1:not(:last-child) {
border-right: none;
}
}
But this doesn't work. Any ideas around?
.container .parent:not(:last-child) .child1{
border-right: none;
}
You should select the last parent and in your case you're using ">" which selects a direct child of the container
Your selector is wrong. You do not need the first > as the child divs are not DIRECT children of the container
.container {
width: 80%;
}
.container .child1:not(:last-child) {
border-right: 3px solid red;
}
.parent {
margin-bottom: 1em;
<div class="container">
<div class="parent">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
<div class="parent">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
<div class="parent">
<div class="child1">Child 1</div>
</div>
</div>
Answer:
You're trying to tell CSS to:
find parents which have multiple children
then find specific child in each of these parent(s)
As of 2020, this is not supported by pure CSS, and the answer is ironically from 2009. Read this, this, and this.
Other Workarounds:
A) By jQuery (or similar solution by JS)
// Find all parents
$('.parent').each(function() {
// Find all children of this parent
var $children = $(this).find('div[class^="child"]');
if($children.length > 1) {// if has 2 or more children
$children.css('borderRight', 'none');
// -- or --
$children.addClass('my_child_no_border_class');
} else {// Has 1 or 0 children
$children.css('borderRight', '1px solid red');
// -- or --
$children.addClass('my_child_border_class');
}
});
If you prefer adding classes, make sure to create CSS classes .my_child_border_class and .my_child_no_border_class
B) By HTML & CSS
Add special classes for children with border and no border:
<!-- HTML -->
<div class="container">
<div class="parent">
<div class="child1 noborder">
<div class="child2">
</div>
<div class="parent">
<div class="child1 noborder">
<div class="child2">
</div>
<div class="parent">
<div class="child1 withborder">
</div>
</div>
<!-- CSS -->
.noborder {
border-right: none;
}
.withborder {
border-right: 1px solid red;
}
C) By CSS
/* All child1 get this css */
.parent > child1 {
border-right: none;
}
/* then we override last parent's child1 with different css */
.parent:last-child > child1 {
border-right: 1px solid red;
}
Conclusion:
There might be other workarounds, but not pure CSS solution.
You can target the last parent and child1 like this.
.parent {
padding: 1rem;
background-color: deepskyblue;
}
.child1 {
height: 3rem;
background-color: aqua;
}
.parent:last-child > .child1 {
background-color: lime;
}
<div class="container">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent">
<div class="child1"></div>
</div>
</div>
you can add a nother class to the last div or an id so you can target it as follow:
<div class="container">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent">
<div class="child1 last-child" id="child"></div>
</div>
</div>
and css property as follow:
.last-child {
border-right: none;
}
For the following generated HTML:
<div id="parent1">
<div class="child" />
</div>
<div id="parent2">
<div class="child" />
</div>
<div id="parent3">
<div class="child" />
</div>
I would like to select .child from #parent1 and #parent2 like:
#parent1 .child, #parent2 .child { Do stuff... }
However, this can become messy. Is it possible to select a group of parents like this?
(#parent1, #parent2) .child { Do stuff... }
Selectors L4 draft introduces :matches(). It allows you to do
:matches(#parent1, #parent2) .child
Note it's an experimental feature, and browsers haven't implemented it yet. However, some support :-moz-any or :-webkit-any, which behave like :matches.
:-moz-any(#parent1, #parent2) .child {
color: blue;
}
:-webkit-any(#parent1, #parent2) .child {
color: blue;
}
:matches(#parent1, #parent2) .child {
color: blue;
}
<div id="parent1">
<div class="child">Child</div>
</div>
<div id="parent2">
<div class="child">Child</div>
</div>
<div id="parent3">
<div class="child">Child</div>
</div>
In this case you can use the [attribute^=value] (begin with) or [attribute*=value] (contain) syntax.
HTML:
<div id="parent1">
<div class="child">child</div>
</div>
<div id="parent2">
<div class="child">child</div>
</div>
<div id="anotherParent">
<div class="child">child</div>
</div>
CSS:
[id^=parent] .child {
color: red;
}
DEMO: https://jsfiddle.net/lmgonzalves/eh5saf1k/
But I think it's better to asign the same class simply.
What you're looking for is nesting, and you'll need to use SASS or SCSS for that: http://jsfiddle.net/soy3tdmy/
#parent1, #parent2 {
.child {
color: red;
text-decoration: underline;
}
}
I am trying to hide every other child after first child of classa class element.
div.classa {
display:none;
}
div.classa:first-child {
display:block !important;
}
<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
How to achieve this using pure css.
Check out here https://jsfiddle.net/32vw04jg/1/
<div class="content">
<div>
<h3>abc</h3>
<div class="classa">some content</div>
</div>
<div>
<h3>xyz</h3>
<div class="classa">more content</div>
</div>
<div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
</div>
.content > div:not(:first-child) {
display: none;
}
If you want to support IE8, then your only option is general sibling selector:
div.classa ~ .classa {
display: none;
}
<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
The problem in your code is that you want to hide the first .classa, but the first .classa isn't the first child in .content, the h3 is the first child.
So as an alternative to the :not() pseudo class, you could use nth-of-type(n+2). It will select all elements with the same type, except the first one.
div.classa:nth-of-type(n+2) {
display:none;
}
<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
You can do it like that:
<div class="content">
<h3>abc</h3>
<div class="classa">some content1</div>
<h3>xyz</h3>
<div class="classa">more content2</div>
<h3>header3</h3>
<div class="classa">another content3</div>
</div>
Css:
.content > .classa:not(:nth-of-type(2)) {
display:none;
}
If I can understand correctly the question the goal here is to hide every child (h3 and div.classa) with the exception of the first h3 and the div.classa next to it.
The easiest way to accomplish it is a combination of the :first-of-type and the ~ (general siblings) selectors.
div.classa:first-of-type ~ * { display:none; }
<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
You can try the :not pseudo class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not
See this answer
There is new CSS3's :first-of-type for your case:
Demo
.content h3, .content div{
display:none;
}
.content .classa:first-of-type{
display : block;
}
.content > *{ display: none;}
.content > *:first-child{ display: block !important; }
I have the following html:
<div class="wrapper">
<h1>Ipods</h1>
<div class="main-topright-bottom">
<h1>Related Products</h1>
<div>Check items to add to the cart or select all.</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A red ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A blue ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
</div>
</div>
and css:
.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }
I want to know how come the blue background does not extend to the bottom div.
What am I doin wrong?
http://jsfiddle.net/johngoche99/C9NKP/2/
Thanks.
Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.
.wrapper {
overflow: hidden;
}
jsfiddle demo
Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.
More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context
change
.wrapper { background: blue; }
To
.wrapper { background: blue;overflow:hidden;}