Databases
StackOverflow2013
Postsdbo
POCSS: Nested declaration on child element is overridden by its parent nested declaration
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: Nested declaration on child element is overridden by its parent nested declaration
    primarykey
    data
    text
    <p>I am having problem with nested CSS declarations for nested elements. Emm.. It's really hard to describe the problem, if you don't get what I mean, please just go to the jsfiddle link I provide below, you would understand what's the issue.</p> <p>Here is the markup</p> <pre><code>&lt;div class="red"&gt; &lt;h1&gt;should be red&lt;/h1&gt; &lt;div class="blue"&gt; &lt;h1&gt;should be blue&lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and here is the CSS:</p> <pre><code>.blue h1 { color: blue; } .red h1 { color: red; } </code></pre> <p>Notice that I put <code>.blue h1</code> before the <code>.red h1</code> declaration. But I have <code>.blue</code> element as a child of <code>.red</code> element. Please see the output on the jsfiddle. It shows wrong color on the <code>.blue h1</code> element. However if I swapped the declaration into <code>.red h1</code> first and then <code>.blue h1</code>, it's all fine. But I CAN'T do that in my real case and moreover if I swap the declaration, it won't work if the markup is also swapped. Vice versa.</p> <p><a href="http://jsfiddle.net/N7FcB/" rel="nofollow">http://jsfiddle.net/N7FcB/</a></p> <p>Anyone got an idea how to solve this one?</p> <p>PS: I know that having direct child selector will solve the problem. But I avoid to use it, because the element I am targeting (<code>&lt;h1&gt;</code>) is not always a direct child of the element with the class.</p> <p>Thanks before :)</p> <p><strong>Update:</strong> Imagine I have this kind of declaration</p> <pre><code>.red h1 { color: red } .green h1 { color: green } .blue h1 { color: blue } .gray h1 { color: gray } /* and so on */ </code></pre> <p>I can freely create my markup whether it's blue inside red or the opposite or gray inside red which is inside blue. It should work well in any conditions I write the nested markup.</p> <p><strong>Update:</strong> I think everyone does not really get what I am seeking here, please check out this new fiddle, it has better understanding of what I want. the first case is the false one, the 2nd case is the right one.</p> <p><a href="http://jsfiddle.net/kmMXW/9/" rel="nofollow">http://jsfiddle.net/kmMXW/9/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid Rozando
    1. USDavid Rozando
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS: Nested declaration on child element is overridden by its parent nested declaration
      1. USNitesh
      1. VTFavorite
    2. VO
      singulars
      1. POCSS: Nested declaration on child element is overridden by its parent nested declaration
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is one of the well-known shortcomings of specificity in CSS unfortunately.
      singulars
      1. POCSS: Nested declaration on child element is overridden by its parent nested declaration
      1. USBoltClock
    2. COHi @BoltClock, yeah I think we need "nearest child" selector in next CSS version. I need CSS to detect where declaration is stronger based on the nearest container which acts in the declaration, not by the latest declaration (when we have several declarations considered same strong)
      singulars
      1. POCSS: Nested declaration on child element is overridden by its parent nested declaration
      1. USDavid Rozando
 

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