Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Apply Padding to Elements with Certain Class after

Apply Padding to Elements with Certain Class after <h1>


What I would like to have done is for the last element (ex. paragraph or unordered list

    ) after the header1

    element that has a class called specialInstructionsNotes to apply extra padding (30px) to only the last element with the class specialInstructionsNotes.

    I've tried to incorporate the use of the :first-of-type and :nth-of-type(1) CSS3 selectors, but these selectors aren't transferred into IE8 (which is the lowest IE compatible browser I'm going to go). My goal is to be able to have the CSS settings (which is apply the padding to only the last element with the class specialInstructionsNotes) show in all the latest browsers and IE8+.

    Note: There can be 3 or more Elements that have this class applied to, just as long as the last element with the class .specialInstructionNotes has the padding at the very bottom. Sorry for any confusion.

    Here is the full CSS I have so far:

    .specialInstructionsNotes {
        color: #004abc;
        font-size: 1.1em;
        line-height: 26px;
        padding: 0 3%;
    h1 + p.specialInstructionsNotes + *, 
        h1 + ul.specialInstructionsNotes + *, 
        h1 + p.specialInstructionsNotes:nth-of-type(1), 
        h1 + ul.specialInstructionsNotes:nth-of-type(1) { 
            padding: 0 0 30px; 
    h1 + p.specialInstructionsNotes:first-of-type, 
    h1 + ul.specialInstructionsNotes:first-of-type { 
        padding: 0; 

    For the HTML, the elements are in one div and are the very top elements contained within the div. This is the HTML I currently have below for a few of the pages/scenarios I'm running into.

    Page 1:

    Proposal Narrative

    A narrative proposal sufficient for peer review is required. Narratives can be up to 5 single-spaced (12 pt. font) pages. Please note: the bibliography does not count towards the 5-page limit). The narrative should include:

    • A statement of the objectives and significance of the proposed research/creative activity.
    • A summary of relevant previous work by the applicant and/or others in the field.
    • A description of the plan for accomplishing the objectives - include methodology, the roles of all personnel involved, and plans for access to any special resources.
    • Although budget details and justification for personnel and non-personnel costs are required in the budget section, the narrative should make reference to all items, activities, and services of the requested funding.
    . . . other elements added to the page . . .

    Page 2:

    Brief Summary of Current Research/Creative Activities

    A brief summary of the investigator’s research/creative activities, whether or not they are related to the activities proposed in this application.

    . . . other elements added to the page . . .

    Page 3:

    Supplemental Information

    • Supplemental information is not required.
    • Please do not upload article reprints or book chapters.
    • Uploaded files must be less than 1 megabyte in size. If you are attempting to upload scanned documents please use the OCR function to convert them to text before uploading.
    . . . other elements added to the page . . .

    Page 4:

    Publication List

    • A listing of publications and/or performances/creative activities for the last three years of the investigator(s)
    • Vitae are not requested

    Each applicant on the proposal should upload a separate list. This list will be stored in the system and you may retrieve it in the future. If you or any other CoPI had previously uploaded a publication list, it will be shown below.

    Please upload your own publication list only.

    . . . other elements added to the page . . .

    Please let me know if I need to explain further.

    Problem courtesy of: Abriel


    What about the workaround like this?

    .specialInstructionsNotes {
       padding-bottom: 30px; /* set padding for all special elements */
    .specialInstructionsNotes + .specialInstructionsNotes {
       margin-top: -30px; /* but make the next element hide the bottom padding
                             of its preceding siblings of the same class */
    Solution courtesy of: Ilya Streltsyn


    View additional discussion.

    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Apply Padding to Elements with Certain Class after


    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription