Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/" rel="noreferrer">CSS 3 selector recommendation</a> is pretty clear about both, but I'll try to show the differences anyway.</p> <h2>Pseudo-classes</h2> <h3>Official description</h3> <blockquote> <p>The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.</p> <p>A pseudo-class always consists of a "colon" (<code>:</code>) followed by the name of the pseudo-class and optionally by a value between parentheses.</p> <p>Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. </p> </blockquote> <p><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-classes" rel="noreferrer">Source</a></p> <h3>What does this mean?</h3> <p>The important nature of pseudo-classes is stated in the very first sentence: <em>"the pseudo-class concept [...] <strong>permit selection</strong>"</em>. It enables the author of an stylesheet to differ between elements based on information that <em>"lies outside of the document tree"</em>, for example the current status of a link (<code>:active</code>,<code>:visited</code>). Those aren't saved anywhere in the DOM, and there exists no DOM interface to access these options.</p> <p>On the other hand, <code>:target</code> could be accessed via DOM manipulation (you could use <code>window.location.hash</code> in order to find the object with JavaScript), but this <em>"cannot be expressed using the other simple selectors"</em>.</p> <p>So basically a pseudo-class will refine the set of selected elements as any other <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#selector-syntax" rel="noreferrer" title="A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.">simple selector</a> in a <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#selector-syntax" rel="noreferrer" title="A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator">sequence of simple selectors</a>. Note that all simple selectors in a sequence of simple selectors will be evaluated at the same time. For a complete list of pseudo-class check the CSS3 selector recommendation.</p> <h3>Example</h3> <p>The following example will color all even rows gray (<code>#ccc</code>), all uneven rows which aren't dividable by 5 white and every other row magenta.</p> <pre><code>table tr:nth-child(2n) td{ background-color: #ccc; } table tr:nth-child(2n+1) td{ background-color: #fff; } table tr:nth-child(2n+1):nth-child(5n) td{ background-color: #f0f; } </code></pre> <h2>Pseudo-elements</h2> <h3>Official description</h3> <blockquote> <p>Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the <code>::before</code> and <code>::after</code> pseudo-elements give access to generated content).</p> <p>A pseudo-element is made of two colons (<code>::</code>) followed by the name of the pseudo-element.</p> <p>This <code>::</code> notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.</p> <p>Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.</p> <p>Note: A future version of this specification may allow multiple pseudo-elements per selector.</p> </blockquote> <p><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements" rel="noreferrer">Source</a></p> <h3>What does this mean?</h3> <p>The most important part here is that <em>"pseudo-elements allow authors to <strong>refer to [..] otherwise inaccessible information</strong>"</em> and that they <em>"may also provide authors a way to refer to content that does not exist in the source document (e.g., the <code>::before</code> and <code>::after</code> pseudo-elements give access to generated content).</em>". The biggest difference is that they actually create a new virtual element on which rules and even pseudo-class selectors can be applied to. They don't filter elements, they basically filter content (<code>::first-line</code>,<code>::first-letter</code>) and wrap it in a virtual container, which the author can style however he want (well, almost).</p> <p>For example the <code>::first-line</code> pseudo-element cannot be reconstructed with JavaScript, as it heavily depends on the current used font, the fonts size, the elements width, floating elements (and probably the time of the day). Well, that's not entirely true: one could still calculate all those values and extract the first line, however doing so is a very cumbersome activity.</p> <p>I guess the biggest difference is that <em>"only one pseudo-element may appear per selector"</em>. The note says that this could be subject to change, but as of 2012 I don't believe we see any different behavior in the future (<a href="http://dev.w3.org/csswg/selectors4/#pseudo-elements" rel="noreferrer">it's still in CSS4</a>).</p> <h3>Example</h3> <p>The following example will add a language-tag to every quote on a given page using the pseudo-class <code>:lang</code> and the pseudo-element <code>::after</code>:</p> <pre><code>q:lang(de)::after{ content: " (German) "; } q:lang(en)::after{ content: " (English) "; } q:lang(fr)::after{ content: " (French) "; } q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{ content: " (Unrecognized language) "; } </code></pre> <h1>TL;DR</h1> <p>Pseudo-classes act as simple selectors in a sequence of selectors and thereby classify elements on non-presentational characteristics, pseudo-elements create new virtual elements.</p> <h1>References</h1> <h2>W3C</h2> <ul> <li><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/" rel="noreferrer">Selectors Level 3</a> <ul> <li><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#selector-syntax" rel="noreferrer">4. Selector syntax</a></li> <li><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-classes" rel="noreferrer">6.6 Pseudo-classes</a></li> <li><a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements" rel="noreferrer">7. Pseudo-elements</a></li> </ul></li> <li><a href="http://www.w3.org/TR/CSS21/" rel="noreferrer">CSS 2.1 Specification</a> (outdated but still informative) <ul> <li><a href="http://www.w3.org/TR/CSS21/selector.html#selector-syntax" rel="noreferrer">5.2 Selector syntax</a>: <blockquote> <p>A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.</p> </blockquote></li> <li><a href="http://www.w3.org/TR/CSS21/selector.html#pseudo-elements" rel="noreferrer">5.10 Pseudo-elements and pseudo-classes</a></li> </ul></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POWhat is the difference between a pseudo-class and a pseudo-element in CSS?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USZeta
    1. USZeta
    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
    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. VTUpMod
    1. COThanks for writing this; now I can scrap the draft that I last touched **8 months ago**.
      singulars
      1. PO
      1. USBoltClock
    2. COI agree with DanMan's comment on SLaks' answer in that pseudo-classes don't really act as "filters" but more as "descriptors". For example, `:not(.someclass):nth-child(even)` doesn't mean to filter out elements that don't have `.someclass`, and among the remaining elements filter out the even occurrences. Instead it represents any element that is *both* `:not(.someclass)` *and* `:nth-child(even)` of its parent at the same time. More in-depth explanations can be found in [this answer](http://stackoverflow.com/a/11692585) and [this answer](http://stackoverflow.com/a/10835694).
      singulars
      1. PO
      1. USBoltClock
    3. CO@BoltClock: I believe I like the term *"characteristic-classifier"* most, since that's what they were somewhat originally described as in CSS2: [*"Pseudo-classes classify elements on characteristics other than their name"*](http://www.w3.org/TR/CSS2/selector.html#pseudo-elements). However, I still haven't found the exact wording I'm happy with.
      singulars
      1. PO
      1. USZeta
 

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