Is there a way to show a child if only parent has the same class? The tricky part of the question is parent and child does not know their class.
<div class="red">
<div class="red">red</div>
<div class="yellow">yellow</div>
<div class="blue">blue</div>
</div>
In this case I would like show only parent and its first child. But If I change parent class from red to yellow, I would like to show only parent and its second child.
Is it possible to create such a thing?
Only if the classes are known before hand...
div div { display: none; }
div.yellow .yellow,
div.blue .blue,
div.red .red { display: block; }
You won't be able to do this in CSS alone, assuming that the class names are unknown to the CSS. However, if they are from a defined set of classes, you could accomplish this by doing something like so (this example using CSS3 :not selector):
div.red > :not(.red),
div.yellow > :not(.yellow),
div.blue > :not(.blue)
{
display: none;
}
If you wanted to venture into JavaScript, you might be able to accomplish the task by doing something like (JSFiddle):
var myDiv = document.getElementById('myDiv');
for( var i=0, j=myDiv.children.length; i<j; ++i)
{
if(myDiv.children[i].className != myDiv.className)
{
myDiv.children[i].style.display = 'none';
}
}
This assumes that the div has an id of myDiv, and the the element classes don't include anything else.
Yes but you will need a handful of extra css class definitions. Try something like this:
div.red{
display:block;
}
div.red div.red{
display: block;
}
div.red div.yellow{
display: none;
}
div.red div.blue{
display: none;
}
etc... If you do not want to explicitly write it out like that the only way would be javascript. JSFIDDLE
Related
In LESS, you can reference a child selector as follows:
<div class="button">
<div class="button-text"> Text </div>
</div>
.button {
&-text {
color:red;
}
}
This will output:
.button .button-text { color:red; }
This is neat and ideal, however, when using a hover, is there a way to maintain the same / similar syntax for the child element? Currently, this wouldn't naturally work:
.button {
&:hover {
&-text {
color:red;
}
}
}
This won't work and as expected, outputs something along the lines of
.button:hover .hover-text { }
Is there a way to get the expected hover result without defining the full class name, in this instance ".button-text"?
Any help would be greatly appreciated.
Because the parents selector & represents all parent selectors (not just the nearest ancestor), nesting under hover, will always include the :hover text.
This rule:
.button {
&:hover &-text {
color:red;
}
}
Will provide the result (lessismore playgroud):
.button:hover .button-text {
color: red;
}
Is it possible to check the class of an element, see if it exists, and then apply the style for another class?
Example pseudo code:
if (.myClass .myBlock == true) {
.otherClass {
display:none
}
}
It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.
Apply a class to the body of your website:
.another-class {
display: none; // hides .another-class by default
}
body.special-class {
.another-class {
display: block; // shows if the body contains .special-class
}
}
Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.
Give the following row a class
Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:
.popup {
display: none;
}
.popup:hover {
display: block;
}
.container:hover + .popup {
display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>
I'm afraid that's all that is possible with CSS.
Let's say I have the following markup.
<div class="parent1">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="parent2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
If I only want to style inner1 of parent1 then I can do something as follows.
.parent1 .inner1{}
However if I want to specify different styles for each of the inner containers then I have to write .parentx in each statement. So my question is can I nest my css statements? The logic would resemble the following:
.parent1{
.inner1{}
.inner2{}
}
.parent2{
.inner1{}
.inner2{}
}
CSS itself does not allow nesting. However, clever guys these days came up with a concept of pre-compiled CSS, such as SASS, LESS etc.
http://lesscss.org/
For example, in LESS something like this is allowed:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But if you are stuck with raw CSS, then what #Brian suggested in his answer would be the best option:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
What you want is:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
This will apply the styles to the 2 lots accordingly.
CSS doesn't give us much in the way of reducing keystrokes. This is why projects like Less and Sass were created.
The shorthand you've described there would be nice, but sadly is not a feature of CSS. The selectors are always read right to left, so .parent1 .inner1 instructs the browser to "find all items with an inner1 class, then loops through those to find the one(s) that are also a parent1 class.
In your specific example, you might consider one of the following options:
If your styles are specific to a single item (the first div within parent1), consider giving that item an id="foo" and then refer to it as #foo in your CSS.
If you don't want to do that, use the > (child) operator to define rules like this...
.inner1 > .parent1
This applies rules for the .inner1 divs that are directly descended from a .parent1 block.
Hope that helps.
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");
}
);
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.