CODEWITHSUNDEEP
css
mahen3d
mahen3d

Reputation: 7734

CSS class before and after the element

I have a simple question

What is the difference between these two statements?

Ex: 

.job-des li{
//you styles here
}

AND

li.job-des{
//you styles here
}

Upvotes: 0

Views: 86

Answers (4)

Sahil Popli
Sahil Popli

Reputation: 1995

.job-des li{
//you styles here
}

In this chunk of code

li can lies anywhere in a elemenet whose class is job-des like

<div class="job-des">
    <ul>
        <li>This is selected as per the conditions  </li>
        <li>This is selected as per the conditions  </li>
        <li>and this one too   </li>
    </ul>
</div>

in this code it will select all li's which is in the specific class

AND in this 

li.job-des{
//you styles here
}

only those li's will be stylized whose class is given .job-des

<div class="any class">
        <ul>
            <li>  i am not selected</li>
            <li class="job-des">i am selected as per the conditions  </li>
            <li> and this one too is not selected  </li>
        </ul>
    </div>

Upvotes: 0

Atif Azad
Atif Azad

Reputation: 527

 .job-des li{
 //This style will apply in li of the element have class .jobs-des
 }

AND

 li.job-des{
 //This style will apply on li which have class .job-des
 }

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Explanation

First .job-des li{ this will apply to the LI which is child of .job-des class.

Example

<div class="job-des"><li></li></div>

Second li.job-des { this will apply to LI having job-des class.

Example

<li class="job-des"></li>

Upvotes: 1

DiMono
DiMono

Reputation: 3368

The first is <li> elements contained in any element that has the class .job-des, while the second is any <li> elements that themselves have the class .job-des

For instance, the first would hit this:

<div class='job-des'>
    <ul>
        <li>It hits me</li>
    </ul>
</div>

while the second would hit this:

<ul>
    <li class='job-des'>It hits me</li>
</ul>

Upvotes: 0

Related Questions