CSS secting div under div-group - css

HTML:
<div class=1><div class=active></div></div>
<div class=2></div>
CSS:
.1 {}
.2 {display:none;}
How can I select the second div when inside div is active?
Actually, change to display:block

Update: It appears you don't want the parent element's style to change. Instead, you want the second <div>s class to change if the first <div> contains a child-element with the class: active.
if ($(".one > div.active").length > 0) {
$('.two').css("display", "block");
}
http://jsfiddle.net/5rphc/2/

.1:active > .2
{
display: block;
}
the ">" means a "sibling" operator in CSS

Related

CSS event on one element, changing an other

How can i change an element with CSS with an event on another element?
E.g. <div id="one"> ....., <div id="two">....
<style>
#one:hover
{
changing the visibility of #two...
}
</style>
In your case, with the element you wish to change being after the element you hover, meaning that you have a structure like:
<div id="one"></div>
<!--you could have some elements between them-->
<div id="two"></div>
or like:
<div id="one">
<!--maybe some elements-->
<div id="two"></div>
<!---->
</div>
In the first case (#one and #two are siblings, that is they are on the same level = have the same parent), you use the general sibling combinator (~), like this:
#one:hover ~ #two { /* style changes */ }
DEMO for the case when #one and #two are siblings and #one is before #two in the HTML.
In the second case (#two is a descendant of #one), you use:
#one:hover #two { /* style changes */ }
DEMO for the case when #two is a descendant of #one.
However, if you wish to change an element that is before #one in the HTML, then that is currently (meaning that this could change in the future) impossible with CSS alone (if you would like to know why, then this article offers an explanation).
But in this case, when #two is before #one in the HTML, you can do it with JavaScript. For instance, if the opacity of #two is initially 0, then you could change it to 1 when hovering #one using:
var one = document.getElementById('one'),
two = document.getElementById('two');
one.addEventListener('mouseover', function(){
two.style.opacity = 1;
}, true);
one.addEventListener('mouseout', function(){
two.style.opacity = 0;
}, true);
DEMO
And if you're using a library like jQuery, then it gets even easier:
$('#one').hover(function(){
$('#two').css({'opacity': 1})},
function(){
$('#two').css({'opacity': 0})
});​​
DEMO
Use a combination of the :hover selector and the ~ General Sibling selector:
div.margin:hover ~.margin2
{
background: #00f;
}
Hover over div 2 and you'll see the other div change.
For this to work, the divs must be siblings (have the same parent element).
http://jsfiddle.net/Kyle_Sevenoaks/mmcRp/

How to properly select these elements?

<div id="main-content">
<div>
<div>target me
<div>don't target me</div>
</div>
</div>
<div>
<div>target me too
<div>don't target me</div>
</div>
</div>
</div>
I've tried this:
#main-content div>div {
}
But this ALSO targets the divs saying "don't target me" I wish not to target those divs.
Of course we can use Id's or classes, but the point is to declare a general rule for all.
Please advice.
Just refine the selector a bit to enforce the hierarchy: #main-content > div > div
http://jsfiddle.net/zXaLU/
As a note, when using structural selectors it's nice to reference non-generic tags.
Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV
If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.
How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}

CSS for same level

If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like :
<div id="1" ></div>
<div></div>
<div></div>
And CSS :
#1 :hover < body > div
{
//Here I change the things
}
Use the general sibling combinator
#yourId:hover ~ div
{
color:red;
}
Also note that Id's must begin with a letter. W3 ID Attribute
Example
Put a wrapper around them, then put the hover on the wrapper.
<div class="wrapper">
<div class="element">foo</div>
<div class="element">bar</div>
<div class="element">baz</div>
</div>
.wrapper:hover .element {
color: red;
}
Example: http://jsfiddle.net/EB92r/

How can I apply a css rule to all descendants of an elements

How can you redefine a class if its in another specific class?
div.cls {
color:blue;
}
div.tst > div.cls {
color:red;
}
<div class="cls">test</div> // text color = blue
<div class="tst">
<div class="cls">test</div> // text color = red
<div>
<div class="cls">test</div> // text color = blue
</div>
<div>
How to make the last one also red?
jsfiddle
http://jsfiddle.net/gpD7H/
I used this, it work for me:
.name-of-parent * { color: red; }
Use the descendant selector [W3C]: div.tst div.cls
> is the child selector [W3C] and will only match children of an element.
Exactly like that. However, your second division won't be red text because it's also contained within another division. The > selector only matches to the immediate children under the element matched before it, so it's looking inside div.tst at only one level. Try removing the > from the selector:
div.tst div.cls {
color:red;
}
Your updated jsFiddle

first-child not working

Should this work am I going crazy?
.project.work:first-child:before {
content: 'Projects';
}
.project.research:first-child:before {
content: 'Research';
}
<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project research">
<p>abcdef</p>
</div>
projects:first-child works fine, research:first-child doesn't stick. Any ideas?
Demo It doesn't work, but whats the best way to achieve this?
:first-child only selects the first child of its parent. Nothing else.
As mentioned in a few of my other answers on the site (1 2 3 4), there is no :first-of-class pseudo-class. If you are looking to apply styles to the first of each class of your div elements, a solution is to apply the styles to all children of that class, and a general sibling selector to undo the styles from subsequent siblings.
Your CSS would then look like this:
.project.work:before {
content: 'Work';
}
.project.research:before {
content: 'Research';
}
.project.work ~ .project.work:before,
.project.research ~ .project.research:before {
content: none;
}
From the specification:
Same as :nth-child(1). The :first-child pseudo-class represents an element that is the first child of some other element.
.project.research is not the first child of its parent.
I believe you want this CSS:
.project.work p:first-child:before {content:'Projects';}
.project.research p:first-child:before {content:'Research';}
or
.project.work > p:first-child:before {content:'Projects';}
.project.research > p:first-child:before {content:'Research';}
Updated fiddle
That matches the first child of an element with the classes "project" and "work" (or "project" and "research"). You don't have to use p:first-child if it may not be a p element, you could use *:first-child instead.

Resources