CODEWITHSUNDEEP
css
5AMWE5T
5AMWE5T

Reputation: 841

How to select only one child element in CSS?

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

Upvotes: 2

Views: 1427

Answers (2)

Ajie Kurniyawan
Ajie Kurniyawan

Reputation: 393

CSS for last element try to use :last-child

#info-box:last-child {
}

Check here for reference CSS selector http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 0

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276276

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.

Upvotes: 2

Related Questions