I have a bunch of elements that look like..
<div id="hi">
<div class="head">
</div>
<div class="footer">
</div>
</div>
..except some of them don't have the footer element, only a head. I want to give elements without a footer a bottom border. I'm hoping for something like..
#hi:hasno(.footer) {
border-bottom: 1px black dotted;
}
Is there a CSS selector I could use for this, or should I just use a JavaScript equivalent?
You can select elements that contain no other elements using the :empty selector, but what you need won't be available until CSS Selectors Level 4’s :has and :not(selector list) are both implemented in browsers. So no, it can't be done in pure CSS. Now whether or not you should use a JavaScript equivalent depends on what you really want to achieve here. If it's a minor detail, feel free to add it with JavaScript if it's not too much of a problem. If it's a huge, essential feature, consider restructuring so you don't need this kind of selector.
Depending on the situation with your background, you could put the border on #hi permanently, and then overlap that with your footer by giving the footer either margin-bottom: -1px or position: relative; bottom: -1px; and hiding the border when the footer is present.
Related
I've always liked the <hr> tag as a design divider because it's a concise empty tag and you can use CSS to design it with a theme. I like it better than border-bottom because you can set the width to be smaller than the content above it i.e. 25% of the container width.
I almost feel like there should be an empty tag that serves as an anchor point for css design.
I know I can do this with any tag with CSS:
<div class=divider></div>
works just fine but it's not as concise as <hr>
So to me <hr> seems like the best choice on the surface.
Then I read the HTML5 semantic meaning of <hr> which says it is a thematic break. (That seems a little arbitrary) is a title a different theme than it's content? What about semantic cases where I want to have a featured title for a post with a nice box over an image with the title on top and a divider and the sub-title under it?
I want my content to make sense for syndication and I want it to look good if it's opened in an alternate css liked reader on safari which again seems to say <hr> isn't a good choice.
Should I use <span class=divider></span> that seems wasteful.
I have also considered <svg> or <br> but to me <br> seems like an empty line and possible also semantically like a pause like a comma in a sentence.
What's the best way to have a horizontal divider semantically when the primary reason is design preference and not a thematic break?
I think out of your suggestions I would just go ahead and use the separate custom div <div class="box-divider"></div> it's really not that wasteful if it's an integral part of your structure and gives you the max flexibility in terms of what your divider will look like and positioning. You can honestly do the same to an <hr> tag if you customize it's css you can make it look however you want.
A lot of users have commented about using psuedo elements on the element that needs a divider which is a fine suggestion.
.box {
position: relative;
}
.box:after {
content: '';
display: block;
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background-color: green;
}
If it's as simple as a border line you can just use border-bottom: 1px solid black; for example to the element itself and forgo the need for a separate element all together. Add some padding-bottom to control the positioning.
All in all if it's a tricky/custom divider that you need I would just go for the separate div divider or pseudo elements.
In my html page, I have div with id footer. Inside of that are couple of other divs, and last one of them has p-tag inside. How do I apply css style for that p?
#footer div p {
background-color: #000;
}
#footer div {
float: left;
width: 23%;
border-left: solid 1px;
margin: 0;
padding-left: 5px;
}
The first one does not seem to overwrite the second, which works fine. Could someone give me hint where to find information especially about the order of css selectors?
You can use the :last-child selector to target the last div and its containing <p> tags.
footer div:last-child p{color:#f00;}
Here is an example fiddle - http://jsfiddle.net/vuGpt/
And here is some further reading - http://www.w3schools.com/cssref/css_selectors.asp
There's no real order to CSS selectors, except the order you create. The styles you define will be overridden if you select the same element later in your css. You just have to be aware of how you are selecting your elemnts. A general selector will be overridden by a more specific selector. For example if you defined the following
p{color:#0f0;}
Then this selector will be overridden by your more direct selector as defined above. To overcome this, you can add !important to your rules. That way you can be reasonably sure that that style will be applied regardless of it being overridden later. Unless you accidently use !important again. It can become a mess quite quickly and with well written CSS you chould be able to avoid using !important at all...
Your resulting CSS for the above would become:
footer div:last-child p{color:#f00 !important;}
Hope this helps...
Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:
<div id="footer">
<div></div>
<div>
<p>My paragraph</p>
</div>
</div>
I have tested this and all appears kosher. See fiddle.
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 :)
I have two sibling divs sitting below each other, both contained in the same parent div.
The requirement is that the divs need a certain amount of space between them, let's say 20px, but the space beween the inner divs and the parent div needs to be the same on all sides (top, right, bottom, left), in this case 0px.
The constraint here is that the inner divs need to have the exact same markup, so I can't apply a different or additional class to just one of them. Also I can't add any markup between the child divs or only above or below one of the child divs.
What would be a good way to solve this problem with CSS (no javascript), in a cross-browser compatible way?
Thanks!
#parentdiv div {
margin-top: 20px;
}
#parentdiv div:first-child {
margin-top: 0;
}
should do it. Alternatively, you could try
#parentdiv div + div {
margin-top: 20px;
}
Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.
you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?
As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:
$("#parentdiv:first").css({ marginTop: 0 })
That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?
Hope this helps someone somewhere.
Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.
Try this example.
<html>
<head>
<style>
div.parent {
background-color: #AAA;
}
div.child {
background-color: #CCC;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
<div class="child"> </div>
</div>
</body>
</html>
You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.
If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.
Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.
In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.