CODEWITHSUNDEEP
csshtmlclass
Victor Martins
Victor Martins

Reputation: 129

CSS - Can someone explain what these other classes are?

I'm taking new class, I just started so I don't know much. its about a piece of code in this code that I don't really know what it means?

   table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

td.replyhl{
    color: #555 !important;
    background-color: #333 !important;
    border-color: #303030 !important;
}

.reply, 
hr{
    border-color: #303030 !important;
}

.reply{
    color: #555 !important;
    background-color: #303030 !important;
}

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

What I don't understand is what are these classes held together by comas doing??

table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

and this part

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

Upvotes: 1

Views: 52

Answers (3)

deeeeekun
deeeeekun

Reputation: 165

To answer your question specifically

table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

applies the styles to:

a. all input tags of type text in all tbody tags that is a child of all tables of class postForm

b. all input tags of type password

c. all text areas in all tbody tags that is a child of all tables of class postForm.

On the other hand,

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

applies the styles to all elements that are of class replytitle or filetitle.

For a broader explanation,

a. > means "child of"

b. [] lets you specify attributes

c. you can apply the same style to different selectors by separating them with commas.

Upvotes: 1

alphapilgrim
alphapilgrim

Reputation: 3975

Here is a brief breakdown on classes vs id's.

https://css-tricks.com/the-difference-between-id-and-class/

As far as The ">" if this class has child with > following selector. Select only the following and do this style with this specific child as follows. 

.class that also has child with following > input {
style: this
}

Upvotes: 0

Michael
Michael

Reputation: 3729

The commas just group a bunch of selectors, and the preceding style is applied to all of those selectors.

So .foo , .bar , .baz { loadsa styles } means loadsa styles gets applied to everything with either the foo, bar, or baz classes.

Note that you say "all these classes held together by comas" but they are not all just classes, they are selectors, so ".foo" is a selector that means anything with a class of "foo", but "#foo" means the element with an ID of "foo" and "table.postForm > tbody input[type="text"]" is kinda hairy, but I think I read that more or less as "an input element which has a a type attribute set to text which is a child of tbody which is an immediate child of table with a class of postForm.

But to answer your question, the commas just mean "all these comma separated things have these styles applied".

Upvotes: 2

Related Questions