How to change the CSS from the last child?


Tags: css,css-selectors

Problem :

I've got the following code (http://jsfiddle.net/Jeroen94/9D6Z6/):

<div class="inbox">‌
    <div class="something 1">
        <a class="inbox-message">Message 1</a>
    </div>
    <div class="something 2">
        <a class="inbox-message">Message 2</a>
    </div>
</div>

.inbox-message {
    border: 0;
    border-bottom: 1px solid #ccc;
}
.inbox a:last-child {  /* This doesn't work... */
    border: 0;
}

I'd like to remove the border from the last message (in this case the second one), but I don't succeed in doing it, because I don't really understand how to work with last-child.

How can I do this?



Solution :

Change the rule to:

.inbox :last-child a{
    border: 0;
}

jsFiddle example

You could also have done .inbox div:last-child a{, but it's not necessary in this case.


    CSS Howto..

    How to change the style of an active menu with php + css

    How to properly center a 100% width div in css

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How to set div to display in only one line?

    How to overlap a border in CSS in order to create tabs?

    how to make background css url dynamic using jquery

    How to use animation with transform CSS

    How to highlight a window in JavaFX?

    How to :hover one div on two other divs and make it dynamic with JS/JQuery?

    How to modify twitter widget in css

    How to reuse a css background sprite for icons of different sizes?

    How can I make each section fit within the li box?

    How do I make a text input non-editable?

    How to enforce a min-width for a page (css)

    CSS: How to accomplish a div which is blurred at the edges?

    Javascript: how to append more text to user copied text ala nydailynews.com

    How can I center an iframe but also have it display inline?

    How to delete Bullets from an Unordered List using CSS?

    How do I make the textbox close to the text label

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    how can resize the page? [closed]

    How to Insert Images inside DIV in this case

    navigation drop-down menu in wrapper not showing second level

    How to select loose text between tags

    css - how to fix first td in table on top if the second td has multiline?

    How to force a list to be vertical using html css

    How to be able to preload jquery contents into hidden tabs for ie browser

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to check image is visible (Webdriver)

    How to @import without including all CSS but just the @extends ones