Optional bottom border on a div - css

Question

I have two HTML samples... Basically there is always a name div in the info div but the total number of could be more.
1)
<div class="person">
<div class="info">
<div class="name">Isabelle of_Bavaria</div>
</div>
</div>
2)
<div class="person">
<div class="info">
<div class="name">King of France Charles_V the_Wise</div>
<div class="title"><label>Title:</label>King of France</div>
<div class="date"><label>Birth:</label>Jan 21st, 1337</div>
<div class="date"><label>Death:</label>Sep 16th, 1380</div>
</div>
</div>
I'm using this bit of CSS to add a line under the name as well as a box around the person div.
.person .name
{
position: relative;
text-align: center;
border-bottom: 1px dotted black;
}
.person
{
position: relative;
width: 250px;
height: auto;
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
Is there anything I can do with the css to prevent the name from having a border in sample 1 while leaving it in sample 2 without the need for additional classes or divs?

Answer 1

Try adding this piece of CSS at the top of your .person .name entry
.person .name:only-of-type
{
border-bottom: 0px transparent;
}
This piece of CSS means that if there is only one of the element type using the .name class in .person (in this example it's a div), it will not have a bottom border. You have to put it before the .person .name in order to overwrite it.
EDIT :
After thinking about it a bit more, i think the pseudo class :only-child would be better suited for your needs instead of :only-of-type since it will only apply if the .name is the only child of .person. So here's the updated CSS
.person .name:only-child
{
border-bottom: 0px transparent;
}

Answer 2

Something logically like this?
.person > .info[having more than one div child] > .name
{
border-bottom: ...
}
sadly, i don't think there's a [...] selector quite like that, however, there are "adjacent sibling selectors" ( http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors )
Maybe as #PhilPerry has suggested, you could change the concept to being "put a top-border on the div immediately following the first-child (or name)", like so:
.name:first-child + div
{
border-top: ...
}