I would like to have stripped rows with "complex" children. I can't figure out how to do this.
I use bootstrap, not sure if it makes any difference, i guess no ;)
Here is what I do:
https://jsfiddle.net/1w9tv4ce/2/
I want all test-01 to be green for exemple, then test-02 black, test-03 green, test-04 black.
.rows-search div:nth-child(even) {
background-color: #95CA44;
}
.rows-search div:nth-child(odd) {
background-color: black;
}
.search-light-grey {
color: darkgray;
}
<div class="container search-light-grey">
<div class="rows-search">
<div id="1">
test-01
<div>
1
</div>
<div>
<div>
2a
</div>
<div>
2b
</div>
<div>
2c
</div>
</div>
</div>
<div id="2">test-02</div>
<div id="3">test-03</div>
<div id="4">test-04</div>
</div>
</div>
Thanks a lot!
Use child combinator (>) in your selectors (this will only target immediate child elements) - see demo below:
.rows-search > div:nth-child(even) { /* <-- changed */
background-color: #95CA44;
}
.rows-search > div:nth-child(odd) { /* <-- changed */
background-color: black;
}
.search-light-grey {
color: darkgray;
}
<div class="container search-light-grey">
<div class="rows-search">
<div id="1">
test-01
<div>
1
</div>
<div>
<div>
2a
</div>
<div>
2b
</div>
<div>
2c
</div>
</div>
</div>
<div id="2">test-02</div>
<div id="3">test-03</div>
<div id="4">test-04</div>
</div>
</div>
As per my comment, use the > selector - means direct children
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
.rows-search > div:nth-child(even) {
background-color: #95CA44;
}
.rows-search > div:nth-child(odd) {
background-color: black;
}
.search-light-grey {
color: darkgray;
}
<div class="container search-light-grey">
<div class="rows-search">
<div id="1">
test-01
<div>
1
</div>
<div>
<div>
2a
</div>
<div>
2b
</div>
<div>
2c
</div>
</div>
</div>
<div id="2">test-02</div>
<div id="3">test-03</div>
<div id="4">test-04</div>
</div>
</div>
Related
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;
}
I want to target all descendant paragraphs of a certain class while ignoring all descendant paragraphs of another class inside the first (this should work no matter which class is inside which). To achieve this I had to use 4 selectors, like this:
* {
margin: 0.2em 0;
width: fit-content;
}
div {
margin-left: 1em
}
/* == 4 selectors to achieve desired effect = */
.orange p {
background: orange;
}
.cyan .orange p {
background: orange;
}
.cyan p {
background: cyan;
}
.orange .cyan p {
background: cyan;
}
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
<div>
<p>Orange</p>
<div class="cyan">
<p>Cyan</p>
<div>
<p>Cyan</p>
</div>
</div>
</div>
</div>
</div>
<div class="cyan">
<p>Cyan</p>
<div>
<p>Cyan</p>
<div>
<p>Cyan</p>
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
</div>
</div>
</div>
</div>
</div>
The question is:
Can this be achieved using only two selectors? [The order of these two selectors should be able to change without altering the effect.]
I have tried selectors like:
.orange:not(.cyan) p {
background: orange;
}
.cyan:not(.orange) p {
background: cyan;
}
but it doesn't target the last one well, for it is inheriting the style of the first. I am looking for two selectors that match these cases without any particular order in the style sheet.
Here is a simple solution with CSS variables. Check the following question for more details: CSS scoped custom property ignored when used to calculate variable in outer scope
* {
margin: 0.2em 0;
width: fit-content;
}
div {
margin-left: 1em
}
p {
background: var(--c);
}
.cyan {
--c:cyan;
}
.orange {
--c:orange;
}
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
<div>
<p>Orange</p>
<div class="cyan">
<p>Cyan</p>
<div>
<p>Cyan</p>
</div>
</div>
</div>
</div>
</div>
<div class="cyan">
<p>Cyan</p>
<div>
<p>Cyan</p>
<div>
<p>Cyan</p>
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
</div>
</div>
</div>
</div>
</div>
You can scale it to any number of coloration as you only need one selector per color and the order doesn't matter:
* {
margin: 0.2em 0;
width: fit-content;
}
div {
margin-left: 1em
}
p {
background: var(--c);
}
.cyan {
--c:cyan;
}
.orange {
--c:orange;
}
.blue {
--c:lightblue;
}
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
<div>
<p>Orange</p>
<div class="cyan">
<p>Cyan</p>
<div class="blue">
<p>Blue</p>
</div>
</div>
</div>
</div>
</div>
<div class="cyan">
<p>Cyan</p>
<div class="blue">
<p>Blue</p>
<div>
<p>Blue</p>
<div class="orange">
<p>Orange</p>
<div>
<p>Orange</p>
</div>
</div>
</div>
</div>
</div>
You cannot achieve what you want, because this is not how CSS works. Both of your statement will have the same specificity, so CSS determines which rule will win according to the order in the CSS file. For the inner styles, you will need to have a statement which has a greater specificity. This can either be achieved with listing all combinations of classes or by e.g. using the child-selector (>).
I thought, I'd share an improvement to your solution. It still uses 4 CSS statements (for 2 colors) but it does not require you to write down all possible combinations (in case of more than 2 classes, it is less effort; see the example below).
First, you colorize any child <p> of a cyan element with the color cyan. Then, you overwrite this behavior with the child-selector which targets only direct children of your element. .orange > p then overwrites .cyan p. The same goes with orange/cyan.
* { font-family: sans-serif; }
.cyan p {
background: cyan;
}
.orange p {
background: orange;
}
.red p {
background: red;
}
.cyan > p {
background: cyan;
}
.orange > p {
background: orange;
}
.red > p {
background: red;
}
<ul>
<li class="orange">
<ul>
<li class="cyan"><p>.orange >> .cyan</p></li>
<li class="red"><p>.orange >> red</p></li>
<li><p>.orange >> –</p></li>
</ul>
</li>
<li class="cyan">
<ul>
<li class="orange"><p>.cyan >> .orange</p></li>
<li class="red"><p>.cyan >> .red</p></li>
<li><p>.cyan >> –</p></li>
</ul>
</li>
<li class="red">
<ul>
<li class="orange"><p>red >> orange</p></li>
<li class="cyan"><p>red >> cyan</p></li>
<li><p>.red >> –</p></li>
</ul>
</li>
</ul>
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>
I am trying to create striped divs that are similar to a stripe spreadsheet. I am working on creating a format that relies on a table created by divs.
When I am trying to implement either nth-child or nth-of-type, I keep getting a broken output. Can somebody help me? I have been trying to find a solution but no avail.
This is my code.
HTML
<div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div>
on repeat...
CSS
.tab1 {
background-color: red;
}
.tab2 {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
.tab1:nth-child(odd) .tab2{
background-color: yellow;
}
http://jsfiddle.net/abnqo501/
edit:
It should be returning green, yellow, red then orange for the color stripes in that order.
If someone can help me scale this as well, that would be nice.
If I wanted to expand and add another div, such as
<div>
<div class="tab1">
1
<div>
2
</div>
</div>
</div>
how would I change the syntax? from div:nth-child(odd) > .tab1 tab2
As I said in the comment .tab1:nth-child(odd) will be always odd-numbered, because .tab1 is the only element in that level.
So you have to use this css:
div:nth-child(odd) > .tab1 .tab2{
background-color: yellow;
}
Have a look:
.tab1 {
background-color: red;
}
.tab2 {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
div:nth-child(odd) > .tab1 .tab2{
background-color: yellow;
}
<div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div><div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div><div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div>
Edit
After you edited your question, the code will be the following:
.tab1 {
background-color: red;
}
div:nth-child(even) > .tab1 > div {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
.tab1:nth-child(odd) > div {
background-color: yellow;
}
<div>
<div class="tab1"> 1
<div> 2 </div>
</div>
</div>
<div>
<div class="tab1"> 3
<div> 4 </div>
</div>
</div>
I using CSS to give every second div a different background color, but somehow I get both when using (odd) and no one when using (even), how is that?
.hoverDiv:nth-child(odd) {
background: red;
}
.hoverDiv:hover {
background: #696969;
cursor: pointer;
}
<div class="modal-body">
<div>
<div class="hoverDiv">
<h2>Number 1</h2>
</div>
</div>
<div>
<div class="hoverDiv">
<h2>Number 2</h2>
</div>
</div>
</div>
http://jsfiddle.net/j9S8v/87/
It's because your nesting is different from your css selector.
In your html, the hoverDiv does not have any (element) siblings.
.hoverDiv:nth-child(odd) {
background: red;
}
.hoverDiv:hover {
background: #696969;
cursor: pointer;
}
<div class="modal-body">
<div class="hoverDiv">
<h2>Number 1</h2>
</div>
<div class="hoverDiv">
<h2>Number 2</h2>
</div>
</div>
You have just to remove the outer div... see the code and use nth-child(2n) or use nth-child(even) both will work correctly
.hoverDiv:nth-child(2n) {
background: red;
}
.hoverDiv:hover {
background: #696969;
cursor: pointer;
}
<div class="modal-body">
<div class="hoverDiv">
<h2>Number 1</h2>
</div>
<div class="hoverDiv">
<h2>Number 2</h2>
</div>
</div>