Is it possible to select all top level children regardless of their type using CSS.
<div class="parent"> <div class="top-level-1">
<!-- CONTENT -->
</div>
<div class="top-level-2">
<!-- CONTENT -->
</div>
<a class="top-level-3">
<!-- CONTENT -->
</a> </div>
When I use,
.parent * {}
it selects the child elements but also elements within that child.
What I want to do is,
Select ONLY the top level child elements (in the sample code above - div.top-level-1, div.top-level-2 and a.top-level-3)
Classes will not be the same therefore a solution where classes are not used is preferred.
Here is the JSFiddle for better understanding: http://jsfiddle.net/Q4BBd/
Use the > combinator to select only immediate children (of any type) of a top-level <div>:
body > div > * {}
JSFiddle
div.parent > *:first-child {color:red}
This Will work for you
Js fiddle:Fiddle
you can use this.
.parent > div {
/*CSS goes here*/
}
I think this would help you:
a) Select all divs:
div{color:black;}
b) Find any divs that are inside of .parent divs (OR direct child of the .parent)
.parent > * {
color:red;
}
Working Example
Related
In my site there're two different div, but they have the same parent div (two child div). So, I want to do this: div.1:hover -> div.2{display:none}. How can I do it using CSS?
Depending on the way your HTML is laid out it can work. The divs need to be next to each other like so:
<div class="first">
First div
</div>
<div class="second">
Second div
</div>
Then use this CSS:
div.first:hover + div.second { display: none; }
Fiddle here: http://jsfiddle.net/CyT2N/
You can easily accomplish that with JQuery.
$(document).ready(function(){$("#first").hover(function(){$("#second").hide();}, function(){$("#second").show();});});
Explanation:
this code adds a "hover" handler for the first element on document.ready, when the mouse enters we hide the second element, and when the mouse leaves, we show it again.
This way, it will work no matter where the elements are within the layout.
See here: http://jsfiddle.net/avrahamcool/RenK2/
Edit
If you want the second div to hide when the first one is clicked, use $("#first").click(function(){$("#second").hide();}) instead of hover(..)
See here: http://jsfiddle.net/avrahamcool/RenK2/1/
Here is a simple way of doing it:
If you have HTML similar to this:
<div class="wrap">
<div class="first">First div</div>
<p>some other element...</p>
<div class="second">Second div</div>
</div>
your CSS would be:
.first:hover ~ .second {
display: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/HQN6n/
The one limitation that .first and .second must be sibling elements within the same parent element, .wrap in this example.
The general sibling combinator ~ is supported for IE7+
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
Is there an easy way to target all 3rd layer elements?
For example, my right column layout is as follows:
<div class=right_column>
<div class=module>
<div>
<p></p>
</div>
</div>
<div class=different_module>
<div>
<p></p>
</div>
</div>
</div>
How do I target both non-classed <div> elements in this instance without specifying each one individually?
Like this: .right_column > div > div
> is the "Child Selector" - check out this top-notch article on CSS Tricks.
You should be able to do something like this
div > div > div{
/* styles here */
}
> is a child-selector.
Here it says select and use the div that is a child of a div that is a child of a div.
Here is an example: http://jsfiddle.net/hbXsE/1/
Note: the HTML you provided has a few missing div tags and some closing span tags. I redid it for the example.
You could use the selector div.right_column div div but it will also match divs nested more deeply. To avoid this on most newer browsers, you could use the child selector, like this: div.right_column > div > div but it won't work in older versions of IE
In the html fragment below, I want the "main" div to have a background image only if "menu" div is not present in the markup. Is this possible?
<div class="header">
<div class="siteTitle">site title</div>
<div class="tagline">site tagline</div>
<div class='menu'></div>
</div>
<div class="main"></div>
http://www.w3.org/TR/css3-selectors/
E + F Matches any F element immediately preceded by a sibling element E.
E:not(s) an E element that does not match simple selector s
edit :not uses a simple selector, so unfortunately you can't use it to filter by properties of children, only attributes of the element.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
You could however put a .empty class on the menu and still use it.
.header .menu:not(.empty) + .main {
background:pink;
}
This solution is the best of both worlds, javascript but using css as per normal.
javascript:
if ($('.menu').length == 0){
$('body').addClass('no_menu');
}
css :
body.no_menu .main{
background:pink;
}
The only pure css solution i see is only possible if you rearrange your html like so:
<div class="header">
<div class="siteTitle">site title</div>
<div class="tagline">site tagline</div>
</div>
<div class="menu"></div>
<div class="main"></div>
then you can use this css to only apply a property):
.menu { background: none }
.menu ~ .main{ background: url() } /* or .menu + .main if they are guaranteed to be adjacent to each other on the code */
in this example, you can see it at work: http://jsfiddle.net/tYhxr/
(test it by deleting the menu div and running it again)
check Keyo's asnwer for a link about how selectors work.
If you can't change the html, the javascript is the way to go.
I hope this helps.
You could add a second class to your main <div> that only serves to add the background you want. Then when you create the markup, you just add the second class specifier to the <div> if you need it, or omit it if you don't.
div.main {
//main stuff
}
div.mainbg {
background: *background-specifications*;
}
When your menu div is present, you use this:
<div class="main mainbg">
And when it's missing, you stick with:
<div class="main">
In the markup below, I'm looking for a way (perhaps using css selector's) to style the content div differently depending on the presence of menu? Menu may or may not be present in that location in the markup and if it is there, I need to add some top margin to content.
I believe sibling and descendent selector rules might not go this far...
"When menu is present as a child of header set the top margin of content (whose parent is a sibling of header) to 100 pixels. Otherwise, set it to zero"
<div class="header">
<div class="sitetitle">site title</div>
<div class="tagline">tagline</div>
<div class="menu">menu</div>
</div>
<div class="main">
<div class="content">content goes here</div>
</div>
If css allowed groupings, I would do it this way...
(.header ~ .menu) + (.main > .content) {margin-top:100px;}
Not possible in your markup.
CSS selectors can only look at the ancestor and at the sibling axes. You cannot look inside ("what children do I have") - only upwards ("what are my parents") and sideways ("what's next to me").
Examples. This:
div.header div.menu
refers to any <div class="menu"> one of whose ancestors is a <div class="header">.
This:
div.header > div.menu
refers to any <div class="menu"> whose direct ancestor (i.e. "parent") is a <div class="header">.
This:
div.header ~ div.menu
refers to any <div class="menu"> that has a <div class="header"> among its preceding siblings, i.e. they have the same parent and occur one after another, but not necessarily adjacent to each other (that's "looking sideways").
This:
div.header + div.menu
refers to any <div class="menu"> whose direct preceding sibling is a <div class="header">.
There are no other traversing selectors in CSS (this statement refers to CSS2) and certainly there are no conditionals.
You could use jQuery:
$('.header:has(.menu) + .main > .content').css('margin-top', '100px');
Unfortunately the :has() selector didn't find its way into css3.
But why don't you simply apply a margin-bottom to div.menu?
You could possibly use some javascript to detect that. Check if menu is under header at load, and if it is, then set the margin-top of content to 100px
I used this CSS code in a conditional formatting.
Format index by counting from the end.
#stk-service-account-menu ul li:nth-last-child(1):before {
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')