Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>CSS selectors — in particular, pseudo-classes, and in particular <code>:not()</code> and the <code>:nth-*()</code> family of pseudo-classes — do not work as "filters"; there's a bit of an explanation <a href="https://stackoverflow.com/questions/5217086/css-selector-involving-pseudo-class-first-child-and-dropcap/5217102#5217102">here</a>, although it seems a little awkward in retrospect. Here's a better explanation.</p> <p>Simple selectors in a sequence aren't processed in the order they are written <em>one by one</em>; rather, they are a set of conditions that an element must match in order for styles to apply to it, and the element must match all these conditions as they are, <em>together</em>. Or instead of calling them <em>conditions</em> you could also call them <em>descriptors</em>, but I would consider "filters" a misnomer when it comes to CSS selectors.</p> <p>Your selector means:</p> <blockquote> <p>Select this element if and only if it is located within <code>#element</code> and it matches all these conditions:</p> <ul> <li>It is a <code>tr</code> element</li> <li>It does not have the class <code>isotope-hidden</code></li> <li>It is the (2n+1)th child of its parent</li> </ul> </blockquote> <p>It does not mean:</p> <blockquote> <ol> <li>Look inside the contents of <code>#element</code></li> <li>Select all <code>tr</code> elements</li> <li>Filter out elements that do not have the class <code>isotope-hidden</code> among these elements</li> <li>Apply styles to every (2n+1)th child among these filtered elements</li> </ol> </blockquote> <p>Even if you could "repaint" or reapply styles after filtering them out, it wouldn't work anyway. This is because whether or not an element the <code>isotope-hidden</code> class (or even whether or not it's a <code>tr</code>!), the <code>:not(.isotope-hidden)</code> selector isn't going to change the fact that an element that is <code>:nth-child(1)</code> is the first child of its parent in the DOM, an element that is <code>:nth-child(2)</code> is the second child of its parent in the DOM, and so on.</p> <p>If you need sequential filters, you won't be able to do this with a pure CSS selector; you'll have to use <a href="http://api.jquery.com/category/traversing/filtering" rel="nofollow noreferrer">jQuery's filter methods</a>, which were designed for this very purpose, to add a class to the respective elements which you can then use to apply your styles:</p> <pre><code>$('#element tr').not('.isotope-hidden').filter(':even'); </code></pre> <p>As an aside, this can also be rewritten as a single jQuery selector, using its <a href="http://api.jquery.com/category/selectors/basic-filter-selectors" rel="nofollow noreferrer">filter selectors</a>:</p> <pre><code>$('#element tr:not(.isotope-hidden):even'); </code></pre> <p>However, despite the similar syntax, there is a <em>vast</em> difference between true CSS selectors and jQuery filters, which is outlined in <a href="https://stackoverflow.com/questions/9983297/difference-between-css-selector-and-jquery-filter/10835694#10835694">this answer</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. POcss nth-child(2n+1) repaint css after filtering out list items
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USBoltClock
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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