Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Generally Agree Impossible, except...</h2> <p>I basically agree with Sych and Fabrício that it is not currently possible to do as a pure CSS solution. However, there are always some exceptions, depending on actual html structure.</p> <p>In your case, there <em>may</em> be an exception, but it does depend on the full constraints of your situation.</p> <p><strong>When Would it Be Possible?</strong></p> <p>Based off your given code, if these two constraints are true, then you can still get what you want via CSS:</p> <ol> <li>All <code>ul</code> items that are direct children of <code>.box</code> are of class <code>.gallery</code>.</li> <li>All gallery groups (except perhaps the very last one) consist of exactly nine <code>li</code> elements (both groups in your example do, but I don't know if that was coincidence or how you are actually setting up your code).</li> </ol> <p><strong>If the above two factors in your html are true</strong>, then this code gets what you want (using <code>color</code> to show selection here):</p> <pre><code>ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) { color: red; } ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) { color: red; } </code></pre> <p><strong>You can see it works</strong> on the code you gave in <a href="http://jsfiddle.net/NZsLB/1/" rel="nofollow"><strong>this fiddle</strong></a>, then you can see it continues to work given an expansion of the html as <a href="http://jsfiddle.net/NZsLB/2/" rel="nofollow"><strong>this fiddle shows</strong></a>, even if the final list is short of nine as both <a href="http://jsfiddle.net/NZsLB/3/" rel="nofollow"><strong>this fiddle</strong></a> and <a href="http://jsfiddle.net/NZsLB/4/" rel="nofollow"><strong>this fiddle shows</strong></a>, but it will fail if the <code>.gallery</code> varies in length at some midpoint of the sequence, as seen in <a href="http://jsfiddle.net/NZsLB/5/" rel="nofollow"><strong>this fiddle</strong></a> (notice how the last two selected texts are not 6 apart from each other because the second to last <code>.gallery</code> has only 7 items).</p> <p><strong>The Overarching Principle</strong></p> <p>So in general, if your dynamic html is output in <em>some type of a regular pattern</em> as demonstrated here, then it can open up the possibility of a pure css solution along the lines of that given. It is when the dynamic generation is also fully random (so in your case if either #1 or #2 condition above is not guaranteed true) that a pure css solution is impossible.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow create CSS Selector which selects the Xn tag including descendants
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USScottS
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow create CSS Selector which selects the Xn tag including descendants
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COScott, the number of < li> tags is random. Well, not random, but varies for different sections of the site, which means there are patterns, but several of them. I'll add a notice about this. Thanks for the extra effort with fiddle, if I won't get a more flexible solution I'll choose your answer.
      singulars
      1. PO
      1. USRoy Peleg
    2. COAs long each is a "regular pattern" (as I mention), with limited numbers of patterns, then you can get a pure css solution. In your case of variety across the site, you would need to probably add a class to the `.box` div that tells the css what "pattern" that box is following, so `.nine` or `.seven` and then configure various css patterns by appending that class to the selector (so in the above, the selector might be `.nine ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n)` etc. Of course, if there are _many_ variations of pattern, then pure css is just not going be a viable solution for you.
      singulars
      1. PO
      1. USScottS
    3. COScott, I cannot touch the site's code unfortunately (no hard coded solution is possible). The CSS selector is set from an externally included file of which I do have control. I'll add a comment about this. But joining a few selectors to match each pattern is an option. Again, if nothing better will come up I'll choose your answer.
      singulars
      1. PO
      1. USRoy Peleg
 

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