:last-Child

[White_Lily]

Hi, I have a problem with my CSS as it is displaying the border-bottom property regardless of the :last-child element on the next style block.

 

.groupCategories
{
display: block;
border-bottom: 1px solid #666666;
}

.groupCategories:last-child
{
border: 0px;
}

 

Any ideas?

[Philip]

Can you show your HTML too? What browser are you using?

[White_Lily]

The CSS is not working in all browsers.

 

HTML:

 

<div class="groupBox">
<div class="groupHeading">
Heading 1
</div>
<div class="group">
<div class="title-2">
<div class="catHeading">
Category 1
</div>
<div class="cateDescription">
This is category description 1
</div>
</div>
<div class="countTopics">
<b>Topic Count:</b><br>
<font>( 345 )</font>
</div>
<div class="clear"></div>
</div>
<div class="group">
<div class="title-2">
<div class="catHeading">
Category 2
</div>
<div class="cateDescription">
This is category description 2
</div>
</div>
<div class="countTopics">
<b>Topic Count:</b><br>
<font>( 545 )</font>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

[kicken]

Nothing in that HTML has a class of groupCategories, so neither of your CSS rules apply to anything.

 

[White_Lily]

i changed the CSS to "groups" and it still does not do anything.

[kicken]

You don't have a group that is the last-child.  The last child of your groupBox element is:

<div class="clear"></div>

 

You could try :last-of-type instead, or just create another class to use that indicates the last one and add it to the element yourself.

 

[White_Lily]

is :last-of-type compatible accross all browsers (even IE 7+)?

[White_Lily]

Okay... :last-of-type doesn't even exist...

[kicken]

Okay... :last-of-type doesn't even exist...

 

sure it does, and it has decent support.  However, it doesn't appear to be useful in your situation because it doesn't take the class name into consideration so it still considers the <div class="clear"> element to be the last.

 

If you need IE7 support, your best bet is making your own class to represent the last element.  eg:

<div class="groups">
  <div class="group"></div>
  <div class="group"></div>
  <div class="group last"></div>
</div>

 

.groups {
    display: block;
    border: 1px solid yellow;
    padding: 10px;
    width: 300px;
}
.group {
    display: block;
    border: 1px solid red;
    background: black;
    width: 100px;
    height: 100px;
    margin: 10px;
}
.group.last {
    background: white;
    border: 1px solid black;
}

 

[White_Lily]

that just makes it more difficult lol. after i have the design done im putting the category html inside a while loop, making the .group .last element useless unless i use JS (which im trying to avoid so far so good).

[kicken]

that just makes it more difficult lol.

 

Such are the ways of the webdesigner.  The more browsers you want to support, the harder it's going to be for you.

 

after i have the design done im putting the category html inside a while loop, making the .group .last element useless unless i use JS (which im trying to avoid so far so good).

 

You don't need JS just to identify the last one.  I assume by putting it in a while loop you mean using PHP or some other server language.  Just use a variable to identify the last iteration of your while loop and add the last class when you generate the html.