Jump to content


Photo

:last-Child


  • Please log in to reply
10 replies to this topic

#1 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 11:48 AM

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?

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#2 Philip

Philip

    Phailip

  • Staff Alumni
  • 4,742 posts

Posted 06 December 2012 - 01:58 PM

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

#3 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 02:23 PM

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>

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#4 kicken

kicken

    Wiser? Not exactly.

  • Gurus
  • 2,674 posts
  • LocationBonita, FL

Posted 06 December 2012 - 02:41 PM

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

Recycle your old CD's, don't trash them!
Did I help you out?  Feeling generous? I accept tips via Paypal or Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#5 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 02:46 PM

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

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#6 kicken

kicken

    Wiser? Not exactly.

  • Gurus
  • 2,674 posts
  • LocationBonita, FL

Posted 06 December 2012 - 03:12 PM

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.

Recycle your old CD's, don't trash them!
Did I help you out?  Feeling generous? I accept tips via Paypal or Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#7 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 03:42 PM

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

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#8 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 04:08 PM

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

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#9 kicken

kicken

    Wiser? Not exactly.

  • Gurus
  • 2,674 posts
  • LocationBonita, FL

Posted 06 December 2012 - 05:13 PM

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;
}

Recycle your old CD's, don't trash them!
Did I help you out?  Feeling generous? I accept tips via Paypal or Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#10 White_Lily

White_Lily

    Advanced Member

  • Members
  • PipPipPip
  • 521 posts

Posted 06 December 2012 - 09:27 PM

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).

"In order to be irreplaceable, one needs to be different from another."

CMS Development: http://cms.janedeaslart.co.uk/


#11 kicken

kicken

    Wiser? Not exactly.

  • Gurus
  • 2,674 posts
  • LocationBonita, FL

Posted 07 December 2012 - 12:58 AM

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.  


Recycle your old CD's, don't trash them!
Did I help you out?  Feeling generous? I accept tips via Paypal or Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com