how to style a div element that is nested within a section, this is what I tried, but I get the error expecting "}";
#section1
{
color: blue;
#div1 {
color: red;
}
}
If it have the id, you can select the ID directly:
#div1 {
// your style here
}
or ou can use CSS selectors in conjunction with it's IDs:
div#section1 div#div1 {
// your style here
}
if you are using just css, then try like,
#section1
{
color: blue;
}
#section1 #div1
{
color: red;
}
If you do not use less or sass, you should not write nested classes.
the only thing that you can use is that divide your class into 2 classes:
But you also can only use #div 1 instead of #section1 #div1.
#section1 {
color: blue;
}
#section1 #div1 {
color: red;
}
<div id="section1">
ABC
<div id="div1">
XYZ
</div>
</div>
Related
I want to know if is there a way to select dynamically an element with same prefix of class but different suffix. Ex:
HTML
<div class="bg-primary-light"></div>
<div class="bg-primary-dark"></div>
CSS
.bg-primary-light { background-color: #fff }
.bg-primary-dark { background-color: #000 }
Is there a way to select for example
.bg-primary {
height: 100px;
.-light { background-color: #fff; }
.-dark {background-color: #000 }
}
`
Just to keep the "parent" properties
You can use the attribute selector with the *= operator to select elements by its partial class name
[class*="bg-primary"][class*="-light"] { background-color: #fff; }
[class*="bg-primary"][class*="-dark"] { background-color: #000; }
Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
.box__something { // <<< Is some better selector?
background: pink;
}
}
}
Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.
While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.
I recommend you play around with my sassmeister gist and see what results you can come up with.
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
}
&--rounded & {
&__something {
background: pink;
}
}
}
I hope this has solved your issue.
The modifier should be used not on the parent, and the child element .box__something
If I understand your problem correctly, I feel your pain! As soon as you nest a nested property & changes to the parent.
You can however cache the original class name as a variable like this:
$box: box;
.#{$box} {
.#{$box}__something {
background: blue;
}
.#{$box}--rounded {
background: green;
.#{$box}__something { // <<< Is some better selector?
background: pink;
}
}
}
The only problem with the method above is that you end up with a larger volume of compiled CSS. This renders to:
.box .box__something {
background: blue;
}
.box .box--rounded {
background: green;
}
.box .box--rounded .box__something {
background: pink;
}
To reduce the size of the output you could combine & with the variable method like so:
.box {
$box: &;
&__something {
background: blue;
}
&--rounded {
background: green;
#{$box}__something {
background: pink;
}
}
}
This renders to:
.box__something {
background: blue;
}
.box--rounded {
background: green;
}
.box--rounded .box__something {
background: pink;
}
That way you can change the class name in the variable and everything gets updated, I also think it reads a bit better.
The class of DIV is FIRST. I want to call class SECOND on hover. How can I do this?
I am using following code:
.first{
background:#F00;
}
.second{
background: #0F0;
}
<div class="first"> This is DIV</div>
You don't need to use an additional class, just add the additional style on hover using the pseudo-selector :hover
<style>
.first{
background:#F00;
}
.first:hover{
background: #0F0;
}
</style>
As i am very kind, i have added an example of how to do what you are asking in pure javascript also:
<style>
.first{
background:#F00;
}
.second{
background: #0F0;
}
</style>
<div class="first" onmouseover="change()" onmouseout="changeBack()"> This is DIV</div>
<script>
function change() {
var d = document.getElementsByClassName("first");
d[0].className += " second";
}
function changeBack() {
var d = document.getElementsByClassName("first");
d[0].className = "first";
}
</script>
Your above way is not correct to do what you are looking for.
Check the below to know how to do it.
Live demo
The HTML code:
<div class="first"> This is DIV</div>
The CSS Code:
.first{
background:#F00;
}
.first:hover{
background: #0F0;
cursor: pointer;
}
Explanation
You need to declare :hover to create hover effect. So instead of creating a new class, you need to add :hover i.e a pseudo class to the class where you want the hover to work. This will make the hover effect you are looking for.
Reference:
W3 Hover reference
Hope this helps.
You can style an element (with a certain class) when another one is hovered in a limited number of cases. Main constraint: the hovered element must be placed in HTML code before the styled one.
More about + and ~ the adjacent and general sibling combinators
.first{
background:#F00;
}
.second{
background-color: #0F0;
}
.first:hover ~ .second {
background-color: tomato;
}
.first:hover ~ .hello .second {
background-color: violet;
}
.hello {
background-color: beige;
}
.hello {
padding: 1rem;
}
<div class="first"> This is DIV</div>
<div> Some div</div>
<div class="second"> I've class .second</div>
<div class="hello">
<div class="second"> Child of a (following) sibling of .first</div>
</div>
Hover the first box to see the result
This is how you would do it in javascript.
document.getElementById('idOfElement') is getting element reference.
Adding an event on it. In your case, you need two events which is onmouseover and onmouseleave.
let first = document.getElementById('first'),
sec = document.getElementById('second');
first.onmouseover = () => {
sec.style.background = 'black';
}
first.onmouseleave = () => {
sec.style.background = 'red';
}
#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
<div id="first">first</div>
<div id="second">second</div>
You can also do this on css. However, this is limited. You can't get reference to your parent element and previous sibling elements. That's what I know. (correct me if I am wrong).
#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
#first:hover ~ #second {
background: black;
}
<div id="first">first</div>
<div id="second">second</div>
Hope it helps. Cheers
i have an inline blocked div inside anchor
HTML:
<ul>
<li>
<a href="">simple
<div class='bar'>
</div>
</a>
</li>
</ul>
CSS:
.bar {
width: 25px;
height: 25px;
background-color: red;
display: inline-block;
}
.bar:hover {
background-color: blue;
}
I need to get hover effect on div while i hover the anchor, not only div.
Also, my case is a little bit more complicated, so i cant use something like
a:hover .bar {
background-color: blue;
}
Here is jsfiddle with code http://jsfiddle.net/zeL102wr/2/
Check this http://jsfiddle.net/zeL102wr/4/
Add a class to your <a> tag and use :hover on that
Example
HTML
<a class="hoveranchor" href="">simple
<div class='bar'>
</div>
</a>
CSS
.hoveranchor:hover > .bar {
background-color: blue;
}
This would apply the style to all elements with class="bar" which are direct descendent of elements with class="hoveranchor"
looks like it can't be done in some universal way. only by something like wrapping li to some class and using css
.baz a:hover .foo .hover {
opacity: 1;
}
.baz a:hover .foo .main {
opacity: 0;
}
Updated the fiddle http://jsfiddle.net/zeL102wr/17/
Since i use LESS, i made a function
.enable-foo-hover() {
&:hover {
.foo {
.main {
opacity: 0;
}
.hover {
opacity: 1;
}
}
}
}
and use it for the element from which i need to hover my construction. Thanks for your answers
Updated Css
ul li a:hover ,.bar:hover {
background-color: blue;
}
Demo
If you are fine with using jquery the following will work for you 'advanced' list items...
JQUERY
$(document).ready(function () {
$('.hoveranchor').mouseover(function (e) {
console.log($(this).children('.main'));
$(this).find('.main').addClass('hover');
$(this).find('.main').removeClass('main');
});
$('.hoveranchor').mouseout(function (e) {
console.log($(this).children('.main'));
$(this).find('.hover').addClass('main');
$(this).find('.hover').removeClass('hover');
});
});
Additionally you will need to:
add class='hoveranchor' to your anchor tags
Remove
Remove css for :hover
Change opacity of .hover to 1
Check it in action here: http://jsfiddle.net/zeL102wr/5/
Why does the background-color of .a does not change when I hover? .b?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.b:hover .a {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
http://jsfiddle.net/2NEgt/323/
Because .a is not descendent or comes after/inside of .b which is condition to work for it
for example if you inverse it, since .b is descendent of .a, it will work
.a:hover .b {
background-color: blue;
}
You are trying to select .a when it's a child of .b in a hover state. This could never happen .a is the parent of .b.
Actually you are trying to change background of parent on child hover this would not possible as it's parent of b if you change b's background color on hover of a then it will work
.a:hover .b {
background-color: blue;
}
it's here
http://jsfiddle.net/u7tYE/
There is an error in your HTML also .a is not descendent
HTML:
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
CSS:
.a {
color: red;
}
.b {
color: orange;
}
.b:hover, .a:hover {
background-color: blue;
}