Databases
StackOverflow2013
Postsdbo
POWhat the difference between classes with space and no space in css, what the use of multiple classes with no space
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat the difference between classes with space and no space in css, what the use of multiple classes with no space
    text
    copied!<p>I am making an accordion using CSS, the below is my use of CSS class without space. I use this to eliminate the animation of padding during slideDown and slideUp effect</p> <pre><code>.acc_container.block{ padding: 20px; } </code></pre> <p>since it stated out that padding is 20 pixels but when i check it seems like no padding at all!!</p> <p>instead, i need to add this in order to let my padding works</p> <pre><code>.acc_container. block{ padding: 20px; } </code></pre> <p>(with space)</p> <p>So what's the difference between the class in CSS with and without a space?</p> <p>This is all my HTML, jQuery with CSS code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body { font: 15px normal Arial, Helvetica, sans-serif; margin: 0; padding: 0; line-height: 1.7em; } .container { width: 500px; margin: 0 auto; } h2.acc_trigger { padding: 0; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 500px; font-size: 2em; font-weight: normal; float: left; display: block; padding: 0 0 0 50px; color: #fff; cursor: pointer; } h2.active { background-position: left bottom; } .acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; background: #f0f0f0; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .acc_container.block { padding: 20px; } .block { padding: 20px; } &lt;/style&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script&gt; type="text/javascript"&gt; $(document).ready(function(){ $('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show(); $('.acc_trigger').click(function(){ if($(this).next().is(':hidden')) { $('.acc_trigger').removeClass('active').next().slideUp(); $(this).toggleClass('active').next().slideDown(); } return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;h2 class="acc_trigger"&gt;Web Design and Development&lt;/a&gt;&lt;/h2&gt; &lt;div class="acc_container"&gt; &lt;div class="block"&gt; &lt;h3&gt;Need A website?&lt;/h3&gt; &lt;p&gt;Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2 class="acc_trigger"&gt;Logo/ Corporate Identity&lt;/h2&gt; &lt;div&gt; class=&amp;quot;acc_container&amp;quot;&amp;gt; &lt;div class="block"&gt; &lt;h3&gt;Need a Logo?&lt;/h3&gt; &lt;p&gt;Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. &lt;/p&gt; &lt;p&gt;Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2 class="acc_trigger"&gt;Search Engine Optimization&lt;/a&gt;&lt;/h2&gt; &lt;div class="acc_container"&gt; &lt;div class="block"&gt; &lt;h3&gt;Need to be heard&lt;/h3&gt; &lt;p&gt;Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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