<style>
div#b {
background-color:blue;
}
#b {
background-color:red;
}
</style>
<div id='a'> div a
<div id='b'>
div b
</div>
</div>
I have two questions with this style and this html. Why does div b takes blue color. I want to know the cascading rules where i can learn more about it? My Second question is what should i do with css to make div b appear inside div a?
CSS Selectors work on specificity. More specific selectors mean that the rules defined within that selector are going to be used in favor of a less specific selector.
As a rule:
element selectors such as div, img, etc carry a weight of 1
class selectors such as .myClass carry a weight of 10
id selectors such as #myId carry a weight of 100
From this you can pretty easily determine why the above failed.
div#b = 101
#b = 100
101 > 100
div#b is more specific than #b because you have an element selector. The first selector specifies what kind of element to look for, whereas the second one says it doesn't matter as long as it picks up that ID.
div#b means
Find only a div whose ID is b.
while #b means
Find any element whose ID is b.
Therefore by specificity, the first rule overrides the second rule.
I don't understand what you mean by making #b appear inside #a, it looks fine to me the way your HTML is structured. On the other hand, you don't have any CSS rules for #a, so there's only background color for #b.
EDIT: if you want the appearance of a box inside another box, give the outer box some padding, and of course a background color:
#a {
background-color: yellow;
padding: 1em;
}
For some css rule references see:
http://css-tricks.com/specifics-on-css-specificity/
http://htmlhelp.com/reference/css/structure.html#syntax
Use display: inline to make div b appear inside a:
<style>
div#b {
background-color:blue;
display: inline;
}
#b {
background-color:red;
}
</style>
<body>
<div id='a'> div a
<div id='b'>
div b
</div>
end div a
</div>
The issue with "my divs appear as lines" is because the width of the inside div is the same as the width of the outside div (default).
Try the following:
<style>
div.inside
{
background-color: red;
padding: 5px;
}
div.outside
{
background-color: green;
padding: 5px;
}
</style>
<div class="outside">
This is text in the outside div.
<div class="inside">
inside
</div>
</div>
You should see a thin line of green (about 5px wide) on the left, right, and bottom of the inside div.
This is not the only way to get this effect.
Related
I have following css and display is set to none if there are no records. However, it displays a red line at the top. You can verify it here http://jsfiddle.net/3agn58u4. Any idea what is causing this?
CSS:
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>
The problem is that you're trying to set CSS styling on a property based on it being empty but that div is not actually empty.
You can see in the snippet provided that the :empty selector is not going to apply to a <div> element that isn't actually empty (even if you can't see its contents).
.testDiv {
background-color:#ff0000;
height: 30px;
width: 40px;
margin: 5px;
}
.testDiv:empty {
background-color: blue;
}
<div class="testDiv">
</div>
<div class="testDiv"></div>
<div class="testDiv">
</div>
You may need Javascript to check actual content of a div before applying styles if this case is going to be prevalent in your solution.
You can change the padding of your <div> and yes, that will hide it from your view when the contents of the div aren't visible, but you're also removing the padding from your <div> so it's likely going to look bad (or not as desired) when there are actual links inside the div.
The :empty pseudo selector will select elements that
contain nothing
or every element that has no children (including text nodes).
or matches element that is empty but has only html comments.
Example:
<p></p><!-- empty element -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><!-- test --></p><!-- empty element with comment -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><a></a></p><!-- element has no text,but has child nodes,hence not empty -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p> </p><!-- element has space ,hence not empty -->
please see the fiddle:EMPTY ELEMENT
This is the reason why your display none is not working.
According to w3school:
The :empty selector matches every element that has no children
(including text nodes).
TasksCount is not empty because it has a child(a element) so display:none; does not effect. By css, it is not possible to check the child where is empty or not and then select parent.
Solution: use Javascript or Jquery.
if($('.TasksCount').find('a').html() == ''){
//Or you can add class or add style $('.TasksCount').css('display','none');
$('.TasksCount').hide();
}
That's because TasksCount background color is set to red. You can set the padding:0 if you want to keep the same color. Or,
.TasksCount {
background-color: #fff;
box-shadow: none;
}
EDIT
This answer has been downvoted multiple times because it does not answer the real question :
Why the :empty property is not taking effect.
As others pointed out, this CSS property matches only elements that have no children. This is the correct answer to this question.
The OP asked
"However, it displays a red line at the top. You can verify it here
... Any idea what is causing this?"
I missed the point about the empty property and did suggested first to remove the padding which partially solves the 'red line' when the DIV and its children are empty. However, this will also strip the padding from the element when it has content.
If you think you have a more complete answer to this question , please leave a comment below and I will update it accordingly.
I'm trying to use nth child to select every other TWO divs.
This means, when there is a collection of divs 1, 2, 3, 4, 5, and 6 - I need to select 1, 2, 5 and 6. Every other two.
CSS:
#navigation .menuItem:nth-child(3n+3) {
background-color: #ccc;
}
HTML:
<div class="menuItemWrapper">
<div class="menuItem">Shop Online</div>
<div class="menuItem">The Blog</div>
<div class="menuItem">LookBook</div>
<div class="menuItem">Gift Finder</div>
<div class="menuItem">About Us</div>
<div class="menuItem sub">Tutorials</div>
<div class="menuItem sub">FAQ</div>
<div class="menuItem sub">Contact</div>
JS Fiddle
You won't be able to do it with a single selector, but you can with two:
#navigation .menuItem:nth-child(4n+1), #navigation .menuItem:nth-child(4n+2) {
background-color: #ccc;
}
Fiddle
There is a simple hack for this:
Firstly: set global color for your lined-up <div>s
.menuItemWrapper>div { background-color: #fff; }
Secondly: select every 4th element and apply alternative background to <div> element directly after it. That makes pairs. -1 to begin from the right place.
.menuItemWrapper>div:nth-child(4n-1) { background-color: #ccc; }
.menuItemWrapper>div:nth-child(4n-1)+div { background-color: #ccc; }
Enjoy!
#Francesca here's a simple and awesome tool for :nth tester by css-trickes, its making the life easier for selectors css-tricks nth-child-tester
Expanding the response from Chowlett to manage the posibility to "skip" elements.
Change the elements that you want to skin from div to nav (this would be pretty much the same).
Reference them by using nth-of-type selector instead of nth-child. and made the selector more specific to avoid changing the background of the navs
.menuItemWrapper div.menuItem:nth-of-type(4n+1),
.menuItemWrapper div.menuItem:nth-of-type(4n+2) {
background-color: #ccc;
}
modyfied demo
(item 5 is skipped)
I think I found a solution to your problem based on Chowlett suggestion: http://jsfiddle.net/Z8Uxt/10/.
All it requires from you is to change the divider to different element type (eg: p instead of div or maybe even the semantic div instead of li).
The solution uses :nth-of-type as :nth-child count every child regardless of its class.
The situation is:
HTML:
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS:
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
The result:
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
http://www.w3.org/wiki/CSS/Properties/float
leftThe element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top.
The content of #b is acting as it should. It floats to the right side of the floated element preceding it.
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
If you float one element, the next element will "touch" it if there is place for it and it is a block level element (native or set by CSS).
If you want the elements "not" next to each other, than don't use float! Keep in mind that they have to be block level to go underneath each other.
Float does not "lift" element up, like for example position: absolute would do.
check out this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I think z-index statement may also be useful
ADDENDUM
<style type="text/css">
<!--
#id {
position:relative;
}
#a{
/* float:left; */
position: absolute;
top:0%;
left0%;
width:800px;
height:150px;
background-color:#CCC;
z-indez:1;
}
#b{
position: absolute;
top:0%;
left0%;
width:1000px;
height:100px;
background-color:#9CC;
z-index:-1;
}
does the trick (in chrome, ff, IE6 ) I couldn't get it to work until I gave id=b a negative z index trust thats helpful
The floated element floats to the left of non-floated elements like the blue element. To force the blue element below the floated element, you could apply clear: left; to it.
If both of your div ID's have float:left assigned then the second div #b will follow suit and go beneath #a
Add this code:
float:left;
to #b style
Give display block to both #a, #b
for example, if there are several DIV elements, one inside another. lets say 3 levels.
how would you go about selecting only the 2nd level of Divs, not knowing how deep they might be,
and not able to give more classes?
// html example of a possible DOM
<div class="level1'>
<a>
<div>
<a>
<div></div>
</a>
</div>
</a>
<a>
<div></div>
</a>
</div>
selectors overview:
div.level1 > div => (BAD) would return nothing because Div is inside a
div.level1 > a > div => (BAD) the 2nd level div's might be deeper, and the exact xpath should not be written
is there some kind of CSS selector combinations that would return 'find the elements but never go find inside them', so then div.level1 div will return only the 2nd-level Divs but not the ones that might be inside them (something of that sort). I find this a very powerful thing to have.
Not likely.
But what you can do is set desired property on the level >= 2 (div.level1 div) and negate it on all the divs below level 2 (div.level1 div div).
Of course, there's always an option of using different classes for each level.
Your first selector looks absolutely fine. Just check out this example CSS:
<style type="text/css">
a, div {
display: block;
margin: 10px;
border: 1px solid grey;
background-color: red
}
div.level1 > div {
background-color: green;
}
</style>
Only the second level DIV is matched as it is a direct child of the div.level1.
BTW: Your HTML makes no sense at all. DIVs inside of inline elements are bad. But links inside of links are even worse :)
This is HTML.
<div class="container">
<div> background of this i need in white </div>
<div> background of this i need in red </div>
<div> background of this i need in white </div>
<div> background of this i need in red </div>
</div>
I want to select alternate div without adding class or id .
Is it possible with CSS only (no Javascript) with IE 7 support
IE7 doesn't support the selector you would require, which is :nth-child().
Generally you would use
.container div:nth-child(even) {
background: red;
}
IE7 does not support it, unfortunately.
You will need to use JavaScript, or add a class to every odd or even row (perhaps using a server side language).
can't we select every second div inside <div class="container"> [with the CSS2 selectors introduced by IE7]?
Well kind of, with the adjacency selector:
.container div { background: white; }
.container div+div { background: red; }
.container div+div+div { background: white; }
.container div+div+div+div { background: red; }
But that means writing out a rule (of increasingly unwieldy length) for each child. The above covers the example markup with four children, so it's manageable for short, fixed-number-of-children elements, but impractical for elements with a large or unlimited number of children.
This cannot be done.
Use in-line style tags, like,
the following works in IE 7
not tested for others.
<div style="background-color:#ffff00" > Hello YOU div</div>
div:nth-child(odd) { background-color:#ffffff; }
div:nth-child(even) { background-color:#ff0000; }
but i don't know (and can't test) if this works in IE7 - if not, you'll have to use different classes for the divs.