How do I get a CSS Selector to Skip Over? - css

Question

How do I get a CSS selector to skip over <dd> and apply to all the <dt> only? I am trying to only apply border-bottom to the first <dt>.
I tried: dl > dt:not(:last-child), but that didn't work either.
CSS:
dt:not(:last-child) {
border-bottom: 5px solid #dddddd;
}
HTML:
<dl>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
</dl>

Answer 1

You are looking for the :first-of-type CSS pseudo-class:
dl > dt:first-of-type {
border-bottom: 5px solid #dddddd;
}
See demo fiddle here.
As always, make sure you check for target browser support before using it. If you have a large audience, the standard way of achieving what you want is using a regular class.

Answer 2

Use :first-child selector
dl > dt:first-child {
border-bottom: 5px solid #dddddd;
}
Fiddle: http://jsfiddle.net/2SZ9f/

Answer 3

you can use first-child
It works exacly the same as last child but it's the first child. should work fine. Here is a codepen :
http://codepen.io/anon/pen/eFkbq

Answer 4

It would depends on which is the special element. If the first is the only one with border then you should use
dt:first-child{
border-bottom: 5px solid #dddddd;
}
But if you want to have border on every child except the last one, then try this:
dt {
border-bottom: 5px solid #dddddd;
}
dt:last-child {
border-bottom: none;
}
This will override the border bottom style added to dt elements.
If you only have 2 elements then you can add id, class or first-child. If the last child is the special one then add the css for it and you may have many other dt elements.