StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:</p> <pre><code><p class="normal">Text</p> <p class="active">Text</p> </code></pre> <p>and in your CSS file:</p> <pre><code>p.normal { background-position : 150px 8px; } p.active { background-position : 4px 8px; } </code></pre> <p>That's the <em>CSS</em> way to do it.</p> <hr> <p>Then there are CSS preprocessors like <a href="http://sass-lang.com/" rel="noreferrer">Sass</a>. You can use <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions" rel="noreferrer">conditionals</a> there, which'd look like this:</p> <pre><code>$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } </code></pre> <p>Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.</p> <hr> <p>A newer feature of CSS proper are <a href="http://caniuse.com/#feat=css-variables" rel="noreferrer"><em>custom properties</em></a> (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).</p> <p>With them you could do something along the line:</p> <pre><code>:root { --main-bg-color: brown; } .one { background-color: var(--main-bg-color); } .two { background-color: black; } </code></pre> <hr> <p>Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a <code>style.css.php</code> file, that looks something like this:</p> <pre><code>p { background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px; } </code></pre> <p>In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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