0

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;
}
Improve this question
1
  • not like that it means that style applies for only those .col1 div which is inside the .content-wrapper not for others...this style only for .col1 div which is not overwrite the content-wrapper div Commented Dec 10, 2013 at 10:20

7 Answers 7

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

.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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

'.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.

Improve this answer

2 Comments

Thank you. Could you also please explain to me what the difference is, when things start with a # or a . and nothing? Like so: #Container .Content-Wrapper (<-- I assume this is a class wich can be used multiple times) Body (<-- a property from HTML doesn't need any . or # I assume?)
selectors starting with a . (dot) means a class of a html element is selected, # means a id of a html element is selected, and "nothing" means all corresponding html elements are selected.
0

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

Improve this answer

Comments

0 
.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

Improve this answer

Comments

0

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

Improve this answer

2 Comments

They won't inherit the width, because they're declared as inline-block
oops. Edited. Yeah they won't inherit the width values. Sorry, missed that inline-block attribute

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.