CODEWITHSUNDEEP
htmlcss
Anicho
Anicho

Reputation: 2667

CSS difference between ".cssClass object" and "object.cssClass"

I was doing some css today and was forced to change some syntax from:

input.cssClass

to

.cssClass input

How do these definitions differ, and when should we use either of them?

Upvotes: 0

Views: 332

Answers (3)

anothershrubery
anothershrubery

Reputation: 20993

The first works with any input element that has the class cssClass:

<input class="cssClass" type="text" />

Whereas the second works with any input element inside an element with class cssClass, eg.:

<div class="cssClass">
    <input type="text" />
</div>

Upvotes: 2

cjk
cjk

Reputation: 46415

input.cssClass will apply that style to input type objects that have that class specified.

.cssClass input will apply that style to input type objects that are contained within any other object type that has the cssClass class.

Upvotes: 4

josh.trow
josh.trow

Reputation: 4901

Wow, that is an odd change. The first will collect all the inputs with class cssClass, while the second will take all inputs inside any element with cssClass.

<body>
 <input class="cssClass" type="text" />
 <div class="cssClass">
   <input type="text" />
 </div>
</body>

So here, the first input will be grabbed by your first selector, while the second input will be grabbed by your second selector. Neither selector will grab both.

Upvotes: 6

Related Questions