|
 |
|
|
|
| Thread title: Styling the last element |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
09-09-2010, 11:29 PM
|
#1
|
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
Posts: 3,164
|
 Styling the last element
Is something like this possible?
Code:
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
div p:last {
styling
}
So the only element to get styling is the last.
|
|
|
|
09-09-2010, 11:33 PM
|
#2
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
Yep, you're looking for :last-child mate, cousin to :first-child.
|
|
|
|
09-09-2010, 11:40 PM
|
#3
|
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
Posts: 3,164
|
Whoop. Cheers.
Gawd. This has just made coding even easier. Love it. No more undeed markup just to curve the edges of a box. 
|
|
|
|
09-09-2010, 11:43 PM
|
#4
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
|
|
|
|
09-09-2010, 11:53 PM
|
#5
|
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
Posts: 3,164
|
bah humbug. guess i shouldn't use it. 
|
|
|
|
09-30-2010, 05:24 AM
|
#6
|
Status: I'm new around here
Join date: Sep 2010
Location: USA
Expertise: xHTML,CSS,jQuery
Software: Coda
Posts: 4
|
Code:
<style type="text/css">
/* this will style the last element */
.class {
background-color:#000;
}
</style>
<!-- the html code -->
<div id="thisdiv">
<p>1</p>
<p>2</p>
<p class="last">3</p>
</div><!-- end thisdiv -->
This will fix it.
|
|
|
|
09-30-2010, 08:51 PM
|
#7
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
Adding a class is easy. Using dynamic pseudo-selectors are the way forward though!
|
|
|
|
09-30-2010, 09:25 PM
|
#8
|
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
Posts: 3,164
|
@mafiya I'd go out of my way to make sure code is kept as short as possible. (: I really don't like practicing your method.
Thanks though.
|
|
|
|
10-01-2010, 10:58 AM
|
#9
|
Status: Request a custom title
Join date: Dec 2005
Location: Colchester, UK
Expertise:
Software:
Posts: 4,625
|
It gets a bit messy if you're using it lots, but you could use jQuery, like:
Code:
<style type="text/css">
/* this will style the last element */
.class {
background-color:#000;
}
</style>
<!-- the html code -->
<div id="thisdiv">
<p>1</p>
<p>2</p>
<p>3</p>
</div><!-- end thisdiv -->
Code:
$('#thisdiv p:last-child').addClass('last');
|
|
|
|
10-01-2010, 12:29 PM
|
#10
|
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
Posts: 2,097
|
Aye, you could do that. But requiring a whole JS library to just style a last child seems pretty cumbersome IMO. Of course, if you're already using jQuery it is probably the best/most compatible way.
The only problem that you'd have with THAT though, is what if people have JS off? My hunch is that the type of people who use browsers that don't support CSS' pseudo-selectors would also be the type of people who don't know whether they have JS on or off!
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed