How to select only one child element in CSS?


Tags: css

Problem :

I'm trying to make a box with a header, a first paragraph, and a second paragraph. How can I select only the last paragraph in CSS so I can move it down, so it isn't overlapping the first paragraph? This is the code I have:

#info-box > p {
    line-height: 1.3em;
    font-size: 17px;
    font-family: Arial;
    text-align: center;
    color: #979797;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    position: absolute;
}

#info-box:nth-child(2) {
    line-height: 1.3em;
    font-size: 17px;
    font-family: Arial;
    text-align: center;
    color: #979797;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 100px;
    position: absolute;
}


Solution :

You're looking for :last-child

Quoting the specification:

The :last-child pseudo-class represents an element that is the last child of some other element.

Here's an example:

div {
    width:100px;
    height:100px;
    background-color:red;
    border:solid;
    margin:2px;
    display:inline-block;
    border-width:1px;
}
div:last-child{
    background-color:white;
}

Although to be fair, absolute position is rarely "the way" like Nit implied in the comments. Fixed sizes in pixel don't work too well on different screen sizes and different zooms, prefer a more logical layout. See this question on why.


    CSS Howto..

    How to hide and fade div using jquery and css

    How to position a div in laravel with inline css [closed]

    how to get image to show up to the left of panel (both in same row)

    How to remove the yellow row highlighting

    How to apply custom CSS on Facebook comment box plugin

    How to add php to wordpress form

    How can I set up a static Webkit Mask

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    How do you skew a div and keep the background image unskewed

    CSS show horizontal scroll bars?

    How use horizonal scorll div content div

    How to use a divider in a navigation with list elements?

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    How to remove extra space after a colon in CSS with Sublime Text 2?

    How to set an auto minimum width on column with css?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to style CGI python with CSS?

    How to set the css property of dynamic data

    How to get this partially diagonal shape from an image in CSS

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    How to center-align an HTML child table within a parent table via CSS

    How to apply CSS page-break to print a table with lots of rows?

    How can I align my HTML components with CSS?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to load Angular.js form to jsFiddle?

    How to make a responsive scrollbar?

    How to do two border upon one div tag by css or by css3? [duplicate]

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How can I dynamically change element's width related with parent width using only CSS? [closed]