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
Related
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
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
The structure of my HTML is like so
<div>
<div>
<h1>Something</h1>
</div>
<div>
<h1 class='Handle'>Something</h1>
</div>
</div>
In the event that the div > div does not have a child with the class "Handle" I want the the div > div to have the style cursor:move;. How would I go about doing this in pure CSS, is it even possible?
:has()
Note: Limited support.
Using the :has() pseudo-class, the following example would work, but — as of February 2023 — browser support is limited.
div > div:not(:has(h1.Handle)) {
cursor: move;
}
*JSFiddle
Alternatively, jQuery supports the :has() selector.
There is no parent selector in CSS, so what you are asking is not possible. What you can do is put the cursor:move on every h1 that doesnt has the class "Handle" by using the attribute selector.
h1:not([class=Handle]) {
cursor:move;
}
http://jsfiddle.net/4HLGF/
Another option is to adjust your HTML, and move your h1 on the same level as the div.
<div>
<h1>Something</h1>
<div>
dragable content
</div>
<h1 class='Handle'>Something</h1>
<div>
non dragable content
</div>
</div>
Now you can do the same check on the h1, and target the div that comes after it.
h1:not([class=Handle]) + div {
cursor:move;
}
http://jsfiddle.net/4HLGF/2/
Try
div > div h1:not([class=Handle]) {
cursor:move;
}
I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}
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 {