I have a series of elements on my page followed by a breadcrumb . Generally, the message elements are empty and don't display, but in the rare case where one of them has content and is visible, I'd like a margin on the breadcrumb element them so it is not flush up against the message. However, I don't want to add a margin otherwise. Is there a way to do this purely with CSS? The + operator will add the margin, but it doesn't go away if the div is not displayed.
<div class="message success"></div>
<div class="message error"></div>
<div class="breadcrumb>some content</div>
.message + .breadcrumb {
margin-top: 10px; /*always there */
}
Strictly-speaking, no: CSS has no means to select an element according to its visibility. You state that the preceding element is usually empty, though, and you want to add a margin only if it has content. That being the case, then:
/* styles the .breadcrumb with a margin-top */
.message + .breadcrumb {
margin-top: 10px;
}
/* this rule is more specific, and so removes the margin-top if the .message
element is truly empty (of everything, including text-nodes and white-space) */
.message:empty + .breadcrumb {
margin-top: 0;
}
JS Fiddle demo.
The above will only work for the adjacent-siblings, if you're hoping to style the margin-top of .breadcrumb based on the existence of content in either, or both, of the .message elements, then that's a little trickier.
References:
:empty pseudo-class.
The rule have to be connected to "message error" element:
.error {
...
border-bottom: solid 1pt black;/*whatever you want*/
...
}
.error:empty {
border-bottom: none;
}
Related
As the title says I have a p element and I want to text-indent the start of every paragraph apart the the first paragraph where I don't want any text-indent. How can I do this in css?
You can give your first paragraph a class and then can do the following:
p:not(.first){
text-indent:30px
}
Please refer to this link:https://jsfiddle.net/n5pjgev6/400/
Another option which wouldn't require adding any additional markup or classes to your page:
http://codepen.io/panchroma/pen/jyaOJL
p{
text-indent:20px;
}
body p:first-child{
text-indent:0;
}
Good luck!
You can do this simply by applying a text-indent property to your paragraphs as so:
p {
text-indent: 50px;
}
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
Excerpt from CSS Tricks.
DEMO
p{
text-indent:40px
}
p:first-child{
text-indent:0;
}
CSS
p > span {
margin: 5px;
display: inline-block;
}
p > span:first-child {
text-indent: 25px;
}
JSFIDDLE
you can use this:
p:not(:first-child) {
text-indent:30px;
}
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
I'm trying to add a bottom margin to the first <div> with a class "unit".
<div id="wrapper-related-albums">
<div class="header">...</div>
<div class="unit">...</div> //add margin-bottom to this one!!!!
<div class="header">...</div>
<div class="unit">...</div>
</div>
#wrapper-related-albums .unit:first-child {margin-bottom:20px;} // doesn't work!!!
#wrapper-related-albums .unit:first-of-type {margin-bottom:20px;} // doesn't work!!!
More General/Flexible Solution
Wesley's answer serves well for your particular html markup, as it assumes the .unit is going to be the second element in the listing. So in your case, that may be so, and his solution works well. However, if someone were seeking a more general solution the following is what should be done:
#wrapper-related-albums .unit {
/* code for the first one */
margin-bottom: 20px;
}
#wrapper-related-albums .unit ~ .unit {
/* code for all the following ones */
margin-bottom: 0px;
}
Using the general sibling selector (~) like this will override all but the first .unit, allowing the first .unit to be anywhere in the wrapper (not just in position #2, and the position need not be known in advance). Here's a fiddle that illustrates it using a color change.
There's a few options, depending on your markup:
Second child with class unit:
#wrapper-related-albums .unit:nth-of-type(2) { }
#wrapper-related-albums .unit:nth-child(2) { }
Adjacent sibling (with class unit) of the first element:
#wrapper-related-albums :first-child + .unit { }
I don't believe there's any way to simply select "the first .unit", but you can add the margin to all except the last one, if it always falls last:
#wrapper-related-albums .unit { margin-bottom: 20px; }
/* negate the above rule */
#wrapper-related-albums .unit:last-child { margin-bottom: 0px; }
How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".
This is what I am trying to do.
Link 1 | Link 2
Put it in an element, and style the element:
<span class="bar">|</span>
In your style sheet, for example:
.bar { font-size: 20px; }
You shouldn't be using the pipe (|) as a separator, use css instead.
Say the anchors were in a div, with id equal to breadcrumbs, like this:
<div id="breadcrumbs">
One
Two
Three
</div>
You could then add separators between them with a couple css rules, like this:
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}
You could vary the size, style and color of the separator with the border-right: 5px solid green rule. Here's an example(updated) in action. Here's some documentation on border styling.
The second rule with :last-child prevents an extra separator after the last element.
To vary the height of the separator, you would change the padding on the first rule.
By popular demand, a list version:
If you put the links in a list:
<ul id="breadcrumb-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
And use rules like this:
ul#breadcrumb-list li {
display: inline-block;
margin: 0;
padding: 1em 1em 0 1em;
border-right: 1px dotted blue;
}
ul#breadcrumb-list li:last-child {
border-right: none;
}
You can use a ul to markup your list of links for better semantics. You have to add the inline-block to put them on one line, li is by default a block level element.
I've also shown a different style you can achieve by varying the padding and border rules.
| is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use | to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.
You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span> tags whenever it occurs in the text you want to style it in.
You can also just use another unicode vertical-bar character which is more to your liking.
edit, In response to:
"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"
Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:
emulate-with-a-span technique - (live demo):
.linkSeparator {
display:inline-block;
margin-bottom:-1em; /*value should be (height-1em)/2*/
height:3em; width:0.25em;
background-color:grey;
margin-left:0.5em; margin-right:0.5em;
}
link1<span class="linkSeparator"></span>link2<span class="linkSeparator">...
images technique:
You could also use images (less elegant, won't go into detail).
sibling selector technique - (live demo):
You can also set the border-left on all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + F Matches any F element immediately preceded by a sibling element E." Therefore:
.separatedLinks a+a {
border-left: 2px solid black;
}
<??? class="separatedLinks">
link1
link2
link3
</???>
You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html
Users can enter descriptions which may include paragraphs or lists. Or they may just enter text without any enclosing <p> or <ul> elements. What I need to do is remove most of the padding and margin above the first element and below the last element so that the user entered content has a nice tight border around it. So I could do one of the following:
Use a css rule I was unaware of to target only the first and last elements
Use css3 or html5 (I assume there's something within these to easily do what I want) and hope everyone upgrades their browsers asap while the older browsers just get a slightly uglier version of the page
Find the first and last elements with Javascript and modify accordingly
Modify the html to add a class like <p class="first">
Ideally the 1st solution exists, does it? I'm ok with the 2nd solution though if not, does it exist? The last 2 I don't care for...
UPDATE: don't care about IE6. But I do need to deal with the situation that if there's just text to begin with, without any <p> or <ul> or other elements, then actually nothing special needs to be done for the top margin/padding.
Use :first-child and :last-child like this. Note that > and :first-child (CSS2) doesn't work in IE6 and below, and :last-child (CSS3) doesn't work in IE8 and below. The only real workaround to both is to use a .first and .last class respectively (you can add them dynamically with JavaScript as Phrogz says).
.description > p, .description > ul {
margin: 1.5em 0;
}
.description > :first-child {
margin-top: 0;
}
.description > :last-child {
margin-bottom: 0;
}
I added the > combinator to prevent elements like strong or li getting selected. What does it mean?
Something like this?
.container * + p, .container * + ul
{
margin: 1em 0 0;
}
.container p, .container ul
{
margin: 0;
}
BoltClock's answer works great in most cases, but IE8 and earlier ignores the :...-child pseudo-selectors.
You can use jQuery to accomplish the same thing, while targetting more browsers.
//On ready...
$(function(){
//Update styles dynamically
$('ul:last').css({'margin-bottom':0,'padding-bottom':0});
$('ul:first').css({'margin-top':0,'padding-top':0});
});
Have you considered wrapping the content in a container with a negative margin? It requires the content to at least be wrapped in a single p element (not hard to test/add melodramatically).
CSS:
.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}
HTML:
<div class="container"><div class="subcontainer">
<p>My first paragraph.</p>
<p>My second paragraph.</p>
</div></div>