Databases
StackOverflow2013
Postsdbo
POStyle only the first match and the last match
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyle only the first match and the last match
    text
    copied!<p>How to target only the first and the last match of a selector in CSS?</p> <p><strong>Example</strong> (This is only an example, general solution needed) to illustrate my requirement:</p> <pre><code>&lt;style&gt; main&gt;article p:first { /* to select the first p anywhere under article */ } main&gt;article p:last { /* to select the last p anywhere under article */ } &lt;/style&gt; &lt;main&gt; &lt;article&gt; &lt;section&gt; &lt;p&gt;SHOULD be selected as first element&lt;/p&gt; &lt;p&gt;SHOULD NOT be selected&lt;/p&gt; &lt;/section&gt; &lt;ul&gt; &lt;li&gt;&lt;p&gt;SHOULD NOT be selected&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;SHOULD NOT be selected&lt;/p&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;SHOULD be selected as last element&lt;/p&gt; &lt;/article&gt; &lt;/main&gt; </code></pre> <p>The DOM under <code>&lt;article&gt;</code> might have <code>&lt;p&gt;</code> as children. <code>&lt;p&gt;</code>s (including the first and the last ones) are not required to be direct children of <code>&lt;article&gt;</code> though and can have any set of parents. Are there any not-necessarily-elegant CSS rule to select only the first and the last <code>&lt;p&gt;</code>?</p> <p>JavaScript as indicated by tags of this question is not allowed, but for means of demonstration purposes… following code does exactly what I want to achieve:</p> <pre><code>var els = document.querySelectorAll('main&gt;article p'), first = els[0], last = els[els.length - 1]; </code></pre> <p>Now what I've already tried using and what did not work out for me:</p> <ul> <li>any selector combination with <code>:first-child</code>, <code>:last-child</code> <ul> <li>There's no guarantee of any structure which one could use to make a fail-proof selector which would select only the first and the last <code>p</code> which is a (not-necessarily-direct) chilren of <code>&lt;article&gt;</code>.</li> </ul></li> <li>any selector combination with <code>:first-of-type</code>, <code>:last-of-type</code> <ul> <li>Because this would also select first/last <code>article *&gt;p</code></li> <li>In particular I've tried <code>main&gt;article p:first-of-type</code> and <code>main&gt;article p:first-of-type</code>.</li> </ul></li> <li>overriding with <code>~</code> and/or <code>+</code></li> </ul> <p><strong>EDITS</strong></p> <ol> <li>The DOM will not necessarily will be the same as given in example – it's just an example after all.</li> <li>Both first and last <code>&lt;p&gt;</code> is a children of article, but not always a direct children. That means there may be other elements between thne first/last <code>&lt;p&gt;</code> and parent <code>&lt;article&gt;</code>.</li> <li>Just remembered jQuery. <code>$('main&gt;article p:first')</code> and <code>$('main&gt;article p:last')</code> from jQuery would do exactly what I want, but I'm restricted to CSS.</li> </ol>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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