i have few divs that are in same class and have diffrent id's. I need to change color for each div, and i don't know how to do it
I would like to have something like this
HTML code:
<div class="thing" id="one"></div>
<div class="thing" id="two"></div>
<div class="thing" id="three"></div>
CSS code:
#one{
color:green;
}
#two{
color:red;
}
.thing{
background-color: get color from id;
}
color - changing the text color
background-color - change the background of the element
Change all 'color' to 'background-color' and see if this is what you trying to do.
Instead of using color directly, you can use variables.
#one {
--thing-color: green;
}
#two {
--thing-color: red;
}
.thing {
color: var(--thing-color);
background-color: var(--thing-color);
}
.things{border-size = 10px} //for all element in class .things
#one{border-color = #blue} //for specific element id one
id element inherit by default
Could just set inline style for background colour for each?
<div class="thing" id="one" style="background: green;"></div>
<div class="thing" id="two" style="background: red;"></div>
<div class="thing" id="three" style="background: blue;"></div>
When I tested this it worked using background: red; and background-color: red;
Your mistake is using 'color' in the IDs instead of 'background-color'. This overrides the class' background color, if any.
#one{
background-color: green;
}
#two{
background-color: red;
}
#three{
background-color: blue;
}
should do the trick.
Use CSS pseudo element as first-child, last-child, nth-child(n)
.thing:first-child{
background-color: green;
}
.thing:nth-child(2){
background-color: red;
}
.thing:last-child{
background-color: blue;
}
Related
When the .post-item <div> is hovered I want to execute some specific styles (change background-color and cursor) but I don't want this to happen if the .rating-wrapper <div> is hovered too. This happens because I want the .rating-wrapper to do something different than the hover of its parent. Basic question: How to do only child's hover, ignoring the parent's hover
HTML:
<div class="post-item">
<div class="rating-wrapper">
<div class="upvote">
<img src="/images/upvote_arrow.png" alt="upvote" />
</div>
<div class="rating"></div>
<div class="downvote">
<img src="/images/downvote_arrow.png" alt="downvote" />
</div>
</div>
<span class="owner-data">
<img src="" alt="" class="owner-avatar" />
<span class="owner-username"></span>
</span>
<span class="creation-date"></span>
<div class="title"></div>
</div>
Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.
You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(:has(#child:hover)) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
For a more reliable approach, you should probably look at adding a splash of JavaScript to the mix.
Use mouseenter and mouseleave events to modify the classes of the parent element, then reference the class in your stylesheet.
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const enter = event => parent.classList.add('child-hover');
const leave = event => parent.classList.remove('child-hover');
child.addEventListener('mouseenter', enter);
child.addEventListener('mouseleave', leave);
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(.child-hover) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
You can use this CSS Selector,
.post-item>:not(.rating-wrapper):hover {
background-color: white;
}
This will select all immediate children of .post-item which are not .rating-wrapper.
To change the block of the remaining items background color, you can enclose them in another div.
There is a css property called not property.The syntax is like:
:not(element) {
// CSS Property}
If you want to learn more, please visit this link:
https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
try:
pointer-events: none
you can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
This is the html part:
.bild{
height:100px;
width: 100px;
}
<div class = "wrapper">
<img class = "bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo" >
</div>
They do not seem to "understand" each other, as the image does not change.
The example with the picture you gave works. It could be that you have not noticed any difference. Here is another example where I colour a text with a class:
.color {
color: red;
}
.colorHeader {
color: red;
}
<p class="color">This text is red!</p>
<h1 class="colorHeader">This header is red!</h1>
you could also change this:
.color {
color: red;
}
.colorHeader {
color: red;
}
to this:
.color, .colorHeader {
color: red;
}
You have some extra spaces in your HTML, but the output still works as defined in your CSS. I recommend specifying the desired width or height and using auto on the other in this case.
.bild {
height: auto;
width: 200px;
}
<div class="wrapper">
<img class="bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo">
</div>
I would like to force a specific attribute on children elements, from the level of the parent. I thought that using !important would be enough, but it is not taken into account on children elements:
.up {
color: red !important;
}
.down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Is it possible to cascade !important down to the children elements?
You can do the following:
.up > * {
color: red !important;
}
This will affect all direct child elements. (You could probably erase the !important in this case, but that depends on the order of the rules and on theselector specifity of the rules for the child elements)
If you want to apply it to ALL children (not just the direct ones), use it without the >, like
.up * {
color: red !important;
}
.down {
color: blue;
}
.up > * {
color: red;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Please try this
.up>.down {
color: red;
}
I hope this is the solution that what you looking for.
.up > .down {
color: red;
}
.down {
color: blue;
}
If u add the html like below the code and ur css will be correct..
HTML:
<div class="up">
this text should be blue
<div class="down">
this text should be red
</div>
</div>
Or Do u want the reverse color then, change the css code
css
.up {
color: blue !important;
}
.down {
color: red;
}
<div class="up myclass">
<div class="down">
this text should be red
</div>
</div>
.up {
color: red !important;
}
.down {
color: blue;
}
.myclass .down {color:initial; color:inherit;}
Whenever you have this kind of situation if you are working other person's code then never edit the initial code because you never know what that code is working for. In this situation you need to do is create your own class and edit the children with your own class.
If you can change the CSS anyway, you can do this without needing !important.
.up {
color: red;
}
:not(.up) > .down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
<div class="down">
this text should be blue
</div>
i have two divs and and i want if when i hover on one div, border color of both divs should be change...
CSS :
.uperdiv {
width:80%;
background-color:black;
margin-left:10%;
border-style:none solid none solid ;
border-width:5px;
border-color:#fff;
border-top-style:none;
height:170px;
margin-top:-220px;
transition:border-color 2s;
-moz-transition:border-color 2s;
-webkit-transition:border-color 2s;
-o-transition:border-color 2s;
}
.uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}
.lowerdiv {
border-style:none solid solid solid ;
border-color:#fff;
border-width:5px;
background-color:black;
width:80%;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height:50px;
margin-left:10%;
}
HTML
<div class="uperdiv">
Some text
</div>
<div class="lowerdiv">
</div>
I tried + sign but it changes lower div border color when i hover on uper div...and you can say that i want to create effects as of one div.
And now i have no idea.. is there any way to do it??
And plz don't use jquery and javascript only css and css3
Thanks in advance :)
Unfortunately, you can't (yet) target the previous sibling using CSS. You could put the two divs in a container, though, and apply the :hover to that.
html
<div class="container">
<div class="upperdiv">
Some text
</div>
<div class="lowerdiv">
Some text 2
</div>
</div>
css
.container:hover .upperdiv,
.container:hover .lowerdiv {
border-color: #9900ff;
}
This way, when you hover either .upperdiv or .lowerdiv, both will have the border-color applied.
We might be able to do this without the container in the future, using the subject indicator
It would look something like this;
.upperdiv:hover,
.upperdiv:hover + .lowerdiv,
.lowerdiv:hover,
!.upperdiv + .lowerdiv:hover { /* target .upperdiv when the next sibling is hovered */
border-color: #9900ff;
}
HTML:
<div class="anyClass">
<div class="upper">
</div>
<div class="lower">
</div>
</div>
Css:
.anyClass:hover div{
border:1px solid #ccc;
}
Just add a container with anyClass to hold your div's
then add the css
You need to add hover for the uper div class:
.uperdiv:hover
FIDDLE
Check it out:
html:
<div class="upperdiv">Some text</div>
<div class="lowerdiv"></div>
css:
.upperdiv, .lowerdiv{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.upperdiv:hover, .upperdiv:hover+.lowerdiv{
border-color: red;
}
It's kind of simplified but it's what you want.
Fiddle: http://jsfiddle.net/b58CU/
Try this
.uperdiv:hover, .uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}
DEMO
I've looked around but can't find the right answer for this... How do I set an element to hover, assuming another is hovered?
Where Assuming "selector" is hovered, it will hover, box 1+2 etc...
http://jsfiddle.net/wgJRQ/
<div id="table">
<div id="row">
<div id="selector">selector 1</div>
<div id="selector2">selector 2</div>
</div>
<br />
<div id="row">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
</div>
<div id="row">
<div id="box3">box 3</div>
<div id="box4">box 4</div>
</div>
Try something like
#box1:hover, #box1:hover~#box2 {
display: table-cell;
background-color:#FFFFFF;
border:2px solid #666666;
text-align: center;
vertical-align: middle;
}
Demo: Fiddle
jQuery:
$('#table > div:first > div')
.hover(function() {
$('#table').children('div')
.eq($(this).index() + 1)
.children('div')
.toggleClass('active');
return false;
});
http://jsfiddle.net/samliew/pyY5u/
You might want to optimize your hover states and reduce it to a single declaration, something like this:
#table > div:nth-child(n+1) > div {
border:2px solid #FFFFFF;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100px;
}
#table > div:nth-child(n+1) > div:hover,
#table > div:nth-child(n+1) > div.active {
background-color:#FFFFFF;
border:2px solid #666666;
}
#box1, #box2 {
background-color:#E07586;
}
#box3, #box4 {
background-color:#837C71;
}
With CSS you can only do it if the "target" element is inside the one being hovered.
In your case, you should change your layout to be arranged in columns instead of rows, so that you have box 1 and box 2 inside selector 1. That way you can change the look of box1 when you hover on its selector: .selector:hover .box1 {...}
If you cannot do this, then you will have to use Javascript.
Keep in mind that you cannot trigger :hover with Javascript, you will have to add a class to the boxes when the mouse enters the selectors, and remove the class when it exits them.