Style only the first match and the last match - css

Question

How to target only the first and the last match of a selector in CSS?
Example (This is only an example, general solution needed) to illustrate my requirement:
<style>
main>article p:first { /* to select the first p anywhere under article */ }
main>article p:last { /* to select the last p anywhere under article */ }
</style>
<main>
<article>
<section>
<p>SHOULD be selected as first element</p>
<p>SHOULD NOT be selected</p>
</section>
<ul>
<li><p>SHOULD NOT be selected</p></li>
<li><p>SHOULD NOT be selected</p></li>
</ul>
<p>SHOULD be selected as last element</p>
</article>
</main>
The DOM under <article> might have <p> as children. <p>s (including the first and the last ones) are not required to be direct children of <article> though and can have any set of parents. Are there any not-necessarily-elegant CSS rule to select only the first and the last <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:
var els = document.querySelectorAll('main>article p'),
first = els[0],
last = els[els.length - 1];
Now what I've already tried using and what did not work out for me:
any selector combination with :first-child, :last-child
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 p which is a (not-necessarily-direct) chilren of <article>.
any selector combination with :first-of-type, :last-of-type
Because this would also select first/last article *>p
In particular I've tried main>article p:first-of-type and main>article p:first-of-type.
overriding with ~ and/or +
EDITS
The DOM will not necessarily will be the same as given in example – it's just an example after all.
Both first and last <p> is a children of article, but not always a direct children. That means there may be other elements between thne first/last <p> and parent <article>.
Just remembered jQuery. $('main>article p:first') and $('main>article p:last') from jQuery would do exactly what I want, but I'm restricted to CSS.

Answer 1

You can use the first-of-type/last-of type you can select the first/last child of a parent with an element type
p:first-of-type
or
p:last-of-type
That will select the first or last paragraph element of that is a child of the parent element
p:first-child
or
p:last-child
Similar to last-of-type
W3 schools has some good information on this also
http://www.w3schools.com/cssref/css_selectors.asp

Answer 2

Unfortunately it is not possible to do what you want without using JavaScript (as shown in your original question). There is currently no global nth-of-class selector available. I believe it is because the styles for elements are calculated in one pass. There's no real way for the selectors to be aware of elements in other branches of the DOM tree.
Much like how you can use the adjacent sibling (+) and general sibling (~) combinators to apply styles that come after a certain selector, but not before it.

Answer 3

this solve the issue:
article section > p:first-child {
color: red;
}
article > p:last-child{
color: red;
}
FIDDLE
or this:
main p:first-child {
color: red;
}
main article > p:last-child{
color: red;
}
article > ul p{color:black !important;}
FIDDLE