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 make two-coloured stripe using CSS?

    how to make dynamically loaded image with different width and height responsive in css

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to hide

    How can I make a 2-level navigation bar? [closed]

    How to catch div position and reposition it later (on MAC)

    unexpected script/css conflict, how to resolve?

    how to center css class images with text?

    CSS3 Box, How to stop automatic resize with content?

    How to make child span collapse with parent

    How to make all elements in one line?

    HTML: slideshow is not recognised as an element in the main content of the page

    How can I override an inline CSS rule using an external file?

    How can I style this span for a quote without causing this layout problem?

    How does jQuery affect CSS structure

    How to create a standing up 3D text effect with Css3 transforms

    How to wrap the center content and make it take the remaining width of the div

    How to avoid universal Rule CSS Asterisk(*)?

    section to be trigger of show/hide content by click html/css only

    How to make alerts overlap?

    how to position subheader right under header [closed]

    how to search with GET method in MVC

    How to change the text-color of element after clicking it?

    Dompdf: how to get background image to show on first page only

    How do i make part of a CSS background fit perfectly to a browser

    How to horizontally center a header that is position:absolute

    How to centre fluid image and a caption using CSS Flexbox?

    How to align a flash movie to center with “overflow: hidden”?

    How to change the CSS on the last clicked div

    How often to use REM in CSS [closed]