I need some help coding individual elements in CSS. If I wanted to have my first HR line to have no top margin and my second HR to have a top margin of 15px, how would I code that? Thank you.I would use pseudo classes (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->)
hr {
margin-top: 15px;
}
hr:first-child {
margin-top:0;
}Thank you. It worked nicely.CSS:
hr#top {
margin-top: 0;
}
hr#bottom {
margin-top: 15px;
}
HTML:
<hr id="top">
.
.
.
<hr id="bottom">Why not use pseudo classes?Why not use pseudo classes?
Why use them?Thats what they are meant for. And you save adding ids to all hr'sI'll grant you that, but what if there's a <p>...</p> before the first <hr>, so that the <p> is the first-child of the containing element? Assuming I understand it correctly (possibly an incorrect assumption), then it wouldn't work, would it?Nah it wouldnt. So yeh it would depend on your situation i spose.
There should be a :first-element-of-this-type or something like that...Well the hr is depreciated.
Since when? I don't believe so.CSS:
hr#top {
margin-top: 0;
}
hr#bottom {
margin-top: 15px;
}
HTML:
<hr id="top">
.
.
.
<hr id="bottom">
So how would you use this for multiple hr's, say 3 or 4? And could you use the same thing for h1, h2, and other elements?If you wanted more than two..
CSS:
hr#first {
margin-top: 0;
}
hr.next {
margin-top: 15px;
}
HTML:
<hr id="first">
.
.
.
<hr class="next">
.
.
.
<hr class="next">
And yes, I think you can do it with h1, h2, etc.You can do the following if most HR's will look one way, a few (class) will look another way, and a specific one (ID) will look yet another way:
.
.
.
<style type="text/css">
hr {
margin: 10px 20px;
}
hr.some {
margin-top: 15px;
}
hr#one {
margin-top: 0;
}
</style>
</head>
<body>
<hr id="one">
<hr>
<hr class="some">
<hr>
<hr class="some">
<hr>
.
.
.Thanks, you've all been really helpful. I started out just doing basic html to build my first website, and now I'm incorporating css. I'm looking forward to learning more.Perhaps the reason to not use the child and sibling pseudo-class selectors is that IE doesn't support them. I'm not a fan of using IE, but given the installed base you can't ignore its limitations.Remember people, classes can't override IDs.
hr {
margin-top: 15px;
}
hr:first-child {
margin-top:0;
}Thank you. It worked nicely.CSS:
hr#top {
margin-top: 0;
}
hr#bottom {
margin-top: 15px;
}
HTML:
<hr id="top">
.
.
.
<hr id="bottom">Why not use pseudo classes?Why not use pseudo classes?
Why use them?Thats what they are meant for. And you save adding ids to all hr'sI'll grant you that, but what if there's a <p>...</p> before the first <hr>, so that the <p> is the first-child of the containing element? Assuming I understand it correctly (possibly an incorrect assumption), then it wouldn't work, would it?Nah it wouldnt. So yeh it would depend on your situation i spose.
There should be a :first-element-of-this-type or something like that...Well the hr is depreciated.
Since when? I don't believe so.CSS:
hr#top {
margin-top: 0;
}
hr#bottom {
margin-top: 15px;
}
HTML:
<hr id="top">
.
.
.
<hr id="bottom">
So how would you use this for multiple hr's, say 3 or 4? And could you use the same thing for h1, h2, and other elements?If you wanted more than two..
CSS:
hr#first {
margin-top: 0;
}
hr.next {
margin-top: 15px;
}
HTML:
<hr id="first">
.
.
.
<hr class="next">
.
.
.
<hr class="next">
And yes, I think you can do it with h1, h2, etc.You can do the following if most HR's will look one way, a few (class) will look another way, and a specific one (ID) will look yet another way:
.
.
.
<style type="text/css">
hr {
margin: 10px 20px;
}
hr.some {
margin-top: 15px;
}
hr#one {
margin-top: 0;
}
</style>
</head>
<body>
<hr id="one">
<hr>
<hr class="some">
<hr>
<hr class="some">
<hr>
.
.
.Thanks, you've all been really helpful. I started out just doing basic html to build my first website, and now I'm incorporating css. I'm looking forward to learning more.Perhaps the reason to not use the child and sibling pseudo-class selectors is that IE doesn't support them. I'm not a fan of using IE, but given the installed base you can't ignore its limitations.Remember people, classes can't override IDs.