I have this LESS setup:
.wrapper {
.parent {
height: 100px;
.children {
//some style;
&:hover {
.parent & {
height: 150px;
}
}
}
}
}
I need to change some height for parent element by hover on some child inside of it. This code is not working, so is there any possible to do this? Much thx for help.
Adding the :hover to the .parent instead of the .children div will achieve the result, http://codepen.io/duncanbeattie/pen/xvDdu
.wrapper {
.parent {
pointer-events:none;
height: 100px;
background:#000;
.children {
//some style;
height:20px;
background:#f00;
pointer-events:all;
}
&:hover {
height:150px;
}
}
}
The main problem here is that unfortunately you can NOT style the parent in any way from the perspective of a child's selector (with or without :hover) in CSS. See this answer here.
You can only style children according to their parents' selectors or siblings according to each-other's selectors.
That said, there are of course easy ways to achieve this with javascript/jQuery,
but not in LESS, as its output is CSS, so the above limitations apply again.
But fortunately some properties of children influence some properties of their parents ... so by styling children, you will affect the parent also. If the child (block) is positioned relatively inside a parent (block), the parents height should adapt to the height (including padding, margin and border) of the child, without you having to do anything really special to the parent.
DEMO
.parent {
width:200px;
background:orange;
}
.child {
background:red;
width:100px;
height:100px;
}
.child:hover {
height:200px;
}
<div class="parent">
<div class="child"></div>
</div>
Make your CSS like this:
.parent.over {
/* whatever style you want when teh child is hovered over */
}
Using jQuery:
$(".children").hover(
function() {
$(this).closest(".parent").removeClass("over").addClass("over");
}, function() {
$(this).closest(".parent").removeClass("over");
}
);
Related
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
I have two situations:
<div class="parent">
<div class="content">TEXT</div>
</div>
or
<div class="content">TEXT</div>
I want to change text color if class parent is present or not.
I write this css but it doesn't work:
div:not(.parent) > .content{
color: blue;
}
How can I solve it?
It doesn't work because in the second example you have no div element wrapping the content so div:not(.parent) is not matched (.content is a direct child of the body element)
Either you write
:not(.parent) > .content {
color: blue;
}
(without defining the element) or just reverse your logic: give a basic style for .content in case there's no parent element and override the style if the .parent exists:
.content {
color: blue; /* no .parent */
}
.parent > .content{
color: inherit;
}
I have this situation:
<div class="parent">
<a class="child"></a>
</div>
and I wanto to give width: 100% rule to both. Is there a better way in SCSS rather than writing:
.parent{
width: 100%;
.child{
width: 100%;
}
}
I am rather new to SCSS syntax, and so maybe it is a very simple question, but nowhere I can find a simple answer.
You target the current selector with &, so you could write:
.parent {
&, .child {
width: 100%;
}
}
As a bonus, you also use & as follows:
.parent {
&.mother {
// target elements classed `parent` AND `mother`
.grandparent & {
// target elements classed `parent` AND `mother` with a
// `grandparent` ancestor.
}
}
}
Try not setting width on the child element at all :)
Say you had a Css style defined below .
div
{
background: url(themes/default/images/backgrounds/lh-navigation.png) repeat-x;
}
.child
{
backgroud-color:#FFFFFF;
}
<Div id="tempDiv" class="child"></Div>
I don't want the backgroud style applied to element tempDiv. How can i remove the parent style for the a specified div element. Is there any way to make it ?thanks
In CSS children inherit properties from parents. You'll have to override the style of the parent in your child style declarations. In this case, since it is a background you are trying to override your .child style declaration will look like this:
.child {
background-image: none;
background-color: #FFFFFF;
}
As the others above have pointed out you could also expand on the selector and write a new rule for the id attribute on the element:
#tempDiv {
background: none;
}
try:
.child#tempDiv{
background: none;
}
note the absense of whitespace between the id and class since it is on the same element.
I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.