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>
Related
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 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>
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 want to apply one for all hover color change effect on the icon, text and button(top to bottom). At the moment hover is working separately either text and icon or button is changing color.
here is the code and also a fiddle
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>
Title text
</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover {
color: white;
}
.button a {
color: #000;
}
.button a:hover {
color: white;
}
EDIT:
Although some of the answers worked on jsfiddle, none of them worked so far on live site.. I am pasting updated HTML code structure from it as the one above was only a sample. Maybe that will help sorting this issue out. Thanks!
<div class="et_pb_column et_pb_column_1_3 col-1-left et_pb_column_93 cboxElement">
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center mp_m_blurb_pulse fins-color-aqua et_pb_blurb_50 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #28375c;">?</span>
</div>
<div class="et_pb_blurb_container">
<h4>Title</h4>
<h5>Subhead</h5>
</div>
</div>
</div>
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_button_26 et_pb_module et_pb_bg_layout_dark" href="#">Find Out More</a>
</div>
</div>
Please Try this,
.col-1-left:hover * {
color: white;
}
I did a code snippet for you. Please try it and confirm it is what you need.
The thing is that you need to add the hover effect to the parent, i.e. .col-1-left in order to be able to change the color to its children elements.
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover, .col-1-left:hover .button a {
color: white;
}
.button a {
color:#000;
}
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>Title text</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>