Databases
StackOverflow2013
Postsdbo
POApply Padding to Elements with Certain Class after <h1>
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApply Padding to Elements with Certain Class after <h1>
    primarykey
    data
    text
    <p>What I would like to have done is for the last element (ex. paragraph <code>&lt;p&gt;</code> or unordered list <code>&lt;ul&gt;</code>) after the header1 <code>&lt;h1&gt;</code> element that has a class called <code>specialInstructionsNotes</code> to apply extra padding (30px) to only the <strong>last</strong> element with the class specialInstructionsNotes.</p> <p>I've tried to incorporate the use of the <code>:first-of-type</code> and <code>:nth-of-type(1)</code> 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 <em>only</em> the last element with the class <code>specialInstructionsNotes</code>) show in all the latest browsers and IE8+.</p> <p><strong>Note:</strong> There can be 3 or more elements that have this class applied to, just as long as the last element with the class <code>.specialInstructionNotes</code> has the padding at the very bottom. Sorry for any confusion.</p> <p>Here is the full CSS I have so far:</p> <pre><code>.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; } </code></pre> <p>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.</p> <p>Page 1:</p> <pre><code>&lt;div class="span12 main"&gt; &lt;h1&gt;&lt;small&gt;Proposal Narrative&lt;/small&gt;&lt;/h1&gt; &lt;p class="specialInstructionsNotes"&gt;A narrative proposal sufficient for peer review is required. Narratives can be up to &lt;strong&gt;5 single-spaced (12 pt. font) pages&lt;/strong&gt;. Please note: the bibliography does &lt;em&gt;not&lt;/em&gt; count towards the 5-page limit). The narrative should include:&lt;/p&gt; &lt;ul class="specialInstructionsNotes"&gt; &lt;li&gt;A statement of the objectives and significance of the proposed research/creative activity.&lt;/li&gt; &lt;li&gt;A summary of relevant previous work by the applicant and/or others in the field.&lt;/li&gt; &lt;li&gt;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.&lt;/li&gt; &lt;li&gt;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.&lt;/li&gt; &lt;/ul&gt; . . . other elements added to the page . . . &lt;/div&gt; </code></pre> <p>Page 2:</p> <pre><code>&lt;div class="span12 main"&gt; &lt;h1&gt;&lt;small&gt;Brief Summary of Current Research/Creative Activities&lt;/small&gt;&lt;/h1&gt; &lt;p class="specialInstructionsNotes"&gt;A brief summary of the investigator’s research/creative activities, whether or not they are related to the activities proposed in this application.&lt;/p&gt; . . . other elements added to the page . . . &lt;/div&gt; </code></pre> <p>Page 3:</p> <pre><code>&lt;div class="span12 main"&gt; &lt;h1&gt;&lt;small&gt;Supplemental Information&lt;/small&gt;&lt;/h1&gt; &lt;ul class="specialInstructionsNotes"&gt; &lt;li&gt;Supplemental information is not required. &lt;/li&gt; &lt;li&gt;Please do not upload article reprints or book chapters. &lt;/li&gt; &lt;li&gt;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. &lt;/li&gt; &lt;/ul&gt; . . . other elements added to the page . . . &lt;/div&gt; </code></pre> <p>Page 4:</p> <pre><code>&lt;div class="span12 main"&gt; &lt;h1&gt;&lt;small&gt;Publication List&lt;/small&gt;&lt;/h1&gt; &lt;ul class="specialInstructionsNotes"&gt; &lt;li&gt;A listing of publications and/or performances/creative activities for the last three years of the investigator(s)&lt;/li&gt; &lt;li&gt;Vitae are not requested&lt;/li&gt; &lt;/ul&gt; &lt;p class="specialInstructionsNotes"&gt;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.&lt;br /&gt;&lt;br /&gt; &lt;strong&gt;Please upload your own publication list only.&lt;/strong&gt; &lt;/p&gt; . . . other elements added to the page . . . &lt;/div&gt; </code></pre> <p>Please let me know if I need to explain further.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAbriel
    1. USAbriel
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. USAbriel
      1. VTBountyStart
    2. VO
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSee if this is the issue: http://stackoverflow.com/questions/1612587/css-adjacent-sibling-selectors-ie8-problem
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. USDiodeus - James MacFarlane
    2. COIt's sort of the issue I'm having. Only problem is the way I have it now works in Chrome and Firefox with Pages 1 and 4. I want to be able to apply padding to just the only element that has the class I want to apply padding to. It just so happens the padding issues I created don't work either in IE8. Only fear of converting as well is I'm using Bootstrap and am not sure if docking it down to that type will affect the structure.
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. USAbriel
    3. CO@Abriel try to not use * selector
      singulars
      1. POApply Padding to Elements with Certain Class after <h1>
      1. USraam86
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload