CODEWITHSUNDEEP
htmlcss
user2153378
user2153378

Reputation:

HTML CSS Classes

Can someone explain the code beneath?

I don't get what .content-wrapper .col1, .content-wrapper .col2 means.

Do col1 and col2 inherit the width and padding from .content-wrapper? And are you gonna overwrite those values again in .content-wrapper?

.content-wrapper {
    width: 600px;
    padding: 10px;
}
.content-wrapper .col1, .content-wrapper .col2 {
    display: inline-block;
    vertical-align: top;
    border: 1px solid #464646;
    background-color: #ffffff;
}
.content-wrapper .col1 {
    width: 295px;
    height: 250px;
}

Upvotes: 0

Views: 705

Answers (7)

vishnu
vishnu

Reputation: 740

col1 and col2 call on 

.content-wrapper .col1, .content-wrapper .col2 {  
display: inline-block;  
vertical-align: top;  
border: 1px solid #464646;  
background-color: #ffffff;

}

will inherit the padding values but not the width from 

.content-wrapper {  
width: 600px;  
padding: 10px;

}

but the code 

.content-wrapper .col1 {  
width: 295px;  
height: 250px;  
}

will only overwrite the width value set on .col1 and not on .col2

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

.content-wrapper .col1, .content-wrapper .col2{}

are just css selectors and they mean: "I'm going to style the .col1 and the .col2 elements that are inside the .content-wrapper, so please select them".

They don't inherit the width of the parent, unless you specify "width: inherit;", however, naturally they would be the same with of the parent but just because usually columns are block elements, and this means they will expand until they can (until they're as wide as the parent). This is not the case here because they are "inline-block" elements and thus will be just as wide as they need to.

The final part,

.content-wrapper .col1 {}

is just selecting the col1 element and changing it's width and height to a fixed value

Upvotes: 0

asdf
asdf

Reputation: 3067

What this means is that an object with the class col1 (.col1) is somewhere underneath an object with the class content-wrapper (.content-wrapper) in the DOM tree. This means that the CSS contained in .content-wrapper .col1 {} is only applied to objects with class col1 contained within .content-wrapper, even if objects with the class .col1 appear elsewhere. Same applies for .content-wrapper .col2 and a comma denotes that they are different objects, however the styling applies to both.

The second .content-wrapper .col1 is separate because whoever wrote the code only wanted the width and height to apply to .content-wrapper .col1 and not .content-wrapper .col2

Upvotes: 0

veelen
veelen

Reputation: 1914

'.content-wrapper .col1, .content-wrapper .col2' is a selector for an html element with class col1 or col2 inside (child of) an element with class .content-wrapper (thats the parent).

The childs inside the parent don't inherit the width of the parent. If the are block elements, the won't be wider than the parent.

Upvotes: 0

codefactor
codefactor

Reputation: 1646

I suggest you read tutorials on CSS.

The .content-wrapper .col1 { } rule is specifying rules on any element with class name as col1 and who has some parent element which has class name as content-wrapper. Unless some other rule adds padding to col1, it will not get the padding that was associated with content-wrapper.

Upvotes: 0

Chris
Chris

Reputation: 145

.content-wrapper is a div and has width 600px. nothing is passed down to the child elements clo1 and col2

there is no passing on here.

You could write 

.content-wrapper .col1, .content-wrapper .col2 {

also as

.col1, .col2 {

and nothing would change, except if you had a second set of .col1 and .col2 outside of the .content-wrapper.

Upvotes: 0

Nitesh
Nitesh

Reputation: 15739

Q. " don't get what '.content-wrapper .col1, .content-wrapper .col2'"

A . Content-wrapper is a class with its children col1 and col2.

Q. "Do col1 and col2 inherith the witdth and padding from content-wrapper"

A . No. It does not unless specified as inherit or auto

Q. "En are you gonna overwrite those values again in content-wrapper"

A . That purely depends on your requirements, but if you want it to make it auto or inherit from the parent, just add them under .content-wrapper .col1, .content-wrapper .col2 with values as auto or inherit.

Hope this helps.

Upvotes: 1

Related Questions