PDA

Click to See Complete Forum and Search --> : Defining Individual Elements

stimpy1
07-20-2005, 11:18 PM
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.
bathurst_guy
07-20-2005, 11:32 PM
I would use pseudo classes (http://www.w3schools.com/css/css_pseudo_classes.asp)

hr {
margin-top: 15px;
}
hr:first-child {
margin-top:0;
}
stimpy1
07-21-2005, 12:03 AM
Thank you. It worked nicely.
NogDog
07-21-2005, 12:23 AM
CSS:

hr#top {
margin-top: 0;
}
hr#bottom {
margin-top: 15px;
}

HTML:

<hr id="top">
.
.
.
<hr id="bottom">
bathurst_guy
07-21-2005, 12:26 AM
Why not use pseudo classes?
NogDog
07-21-2005, 12:33 AM
Why not use pseudo classes?
Why use them?
bathurst_guy
07-21-2005, 12:34 AM
Thats what they are meant for. And you save adding ids to all hr's
NogDog
07-21-2005, 12:38 AM
I'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?
bathurst_guy
07-21-2005, 12:52 AM
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...
drhowarddrfine
07-21-2005, 09:41 AM
Well the hr is depreciated.
Since when? I don't believe so.
stimpy1
07-21-2005, 11:38 AM
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?
Sanim
07-21-2005, 11:46 AM
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.
NogDog
07-21-2005, 02:27 PM
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>
.
.
.
stimpy1
07-21-2005, 11:28 PM
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.
prouton
07-22-2005, 06:05 AM
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.
davidbrent
07-22-2005, 06:29 AM
Remember people, classes can't override IDs.