CODEWITHSUNDEEP
htmlcssbootstrap-4twitter-bootstrap-4
SharminArshi
SharminArshi

Reputation: 11

Difference between two types of CSS class declaration

So, I have been using my own CSS class named myclass and Bootstrap built-in class container. My question is while declaring a with both classes.

Should I use

<div class="myclass container">some code</div>

this format, or:

<div class="myclass">
    <div class="container">
      some code
    </div>
</div>

Does both work in the same way? Or these two are different?

Upvotes: 0

Views: 106

Answers (2)

JoelBonetR
JoelBonetR

Reputation: 1572

Both are totally different.

<!-- Here you're declaring ONE div element with two values on class atribute -->
<div class="myclass container">some code</div> this format
<!-- Here you're declaring TWO elements with a different class each one -->
<div class="myclass">
       <div class="container">

    </div>
</div>

Why this is so different? HTML tags/eelements have default properties with default values, plus the properties and values that you put in addition.

For example: if you set globally:

div{padding:5px;}

On the first example, the content inside the div will be padded 5px.

On the second example, the content inside container will be padded 10px.

That can happen with default properties rendered by the browser or globally applied by frameworks as bootstrap.

Upvotes: 0

dippas
dippas

Reputation: 60563

They are different, first one you have 2 classes for the same element, and you can select the element by using the following rules:

  • .container {}

  • .myclass{}

  • .myclass.container{} or .container.myclass{}

The second example you have a parent and a child elemtns

which you can use the following rule:

.myclass .container {}

Upvotes: 1

Related Questions