title: Regular expression "AND OR" for [left | right] || [top | bottom]
body: <p>I am trying to write a regex that will match the following YACC expression:
  <code>[left | right] || [top | bottom]</code>:</p>
  
  <p>It should match: (left or right) AND OR (top or bottom). OR '<code>|</code>' is simple to do but '<code>||</code>' I can't figure it out. 
  This expression is part of a CSS gradient grammar defined by W3C: </p>
  
  <pre><code>&lt;linear-gradient&gt; = linear-gradient(
      [ [ &lt;angle&gt; | to &lt;side-or-corner&gt; ] ,]? 
      &lt;color-stop&gt;[, &lt;color-stop&gt;]+
  )
  
  &lt;side-or-corner&gt; = [left | right] || [top | bottom]
  </code></pre>
  
  <p>Edit:
  Giving: left top
  Matched: left top</p>
  
  <p>Giving: left
  Matched: left</p>
  
  <p>Giving: right bottom
  Matched: right bottom</p>
  
  <p>Giving: right 20px
  Matched: right</p>
  
  <p>Hope this explains it better.
  Thank you</p>