CSS Classes for specific elements

[anjanesh]

Hi

Is it not possible to define different classes for different elements ?

    <style type="text/css">
    pre .code1
     {
        border:1px solid red;
        color:red;
     }
    span .code1 
     {
        border:1px solid blue;        
        color:blue;
     }
    </style>

<pre class="code1">
code snippet
</pre>
<span class="code1">code line</span>

[RetroNetro]

Hello

Yes, get rid of the space between the (pre .) and the (span .) in your css:

pre.code1
     {
        border:1px solid red;
        color:red;
     }
    span.code1 
     {
        border:1px solid blue;        
        color:blue;
     }

Hope it helps.

[anjanesh]

Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

Thanks Johnny.

[RetroNetro]

Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

Thanks Johnny.

I do not think it was interpreting it at all. Glad I was able to assist.

[all4nerds]

Hello

Although it's working now, and an interesting use of the same class name, are you sure it's useful ? class + more code , contradicts the class re-use/or less code

direct Tag use , often not practical
pre{}

span{}

simple targeting from a container with a class code1, no additional mark-up in the HTML (or make use of existing ID's or classes )
.code1 pre{}

.code1 span{}

simple class use, re-use, ads mark-up to the HTML
<pre class="code1">

<span class="code2">

[Centauri]

Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

With the space there, it is interpreted as an undefined element with a class of "code1" inside a pre or span.

[AutisticCuckoo]

Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

The space is a 'descendant combinator' in CSS, so pre .code1 means: any element with the class code1 which is a descendant of a pre element.

It is actually pre *.code1, with an implicit universal selector.

[anjanesh]

But the same doesnt seem to hold for classes for classes ?

.clsA
 {
 }
 
.clsB
 {
 }
 
.clsA.cls1 /* cls1 class specically for elements in the .clsA container */
 {
 }
 
.clsB.cls1 /* cls1 class specically for elements in the .clsB container */
 {
 }

[all4nerds]

Hello

Read the answers, this is how it works

<pre class="code1">

<pre class="code1 x">

<span class="code1 y">

[anjanesh]

I was referring to nested elements.

<div class="clsA">
A Inner Content
    <div class="cls1">
    A1 Inner Content
    </div>
</div>
 
<div class="clsB">
B Inner Content
    <div class="cls1">
    B1 Inner Content
    </div>
</div>

[AutisticCuckoo]

But the same doesnt seem to hold for classes for classes ?

.clsA.cls1 /* cls1 class specically for elements in the .clsA container */

No, this selects elements that have both clsA and cls1 in their class attributes. It's really

*.clsA.cls1 {}
/* or */
*[class~="clsA"][class~="cls1"] {}

If you want to target elements with the cls1 class nested inside an element with the clsA class, you have to include a descendant combinator (white space) between the class selectors:

.clsA .cls1 {}
/* which means */
*.clsA *.cls1 {}
/* or */
*[class~="clsA"] *[class~="cls1"] {}

[all4nerds]

Hello

simple, if nested no more no less, next time show your full code PLease, because a few full blasting idiots will sent you off in the wrong direction

class="cls1"

class="cls1"

or
.clsA div

.clsB div

gets
.clsA div,.clsB div
are you still with me ?