CSS for elements ONLY under a specific id

Css

Css Problem Overview


I have a div element that has an id and this div contains a set of inputs and labels. I ONLY want to style the inputs inside this specific div but .. the following styles everything (global) instead of keeping the scope inside #ParentDiv

#ParentDiv label,input { display: inline; }

Also, is it possible to do this type of thing with valid css in IE6/7?

Css Solutions


Solution 1 - Css

you need this:

#ParentDiv label, #ParentDiv input { display: inline; }

A comma indicates a new selector statement.

Often, so that I remember what each of the selectors is, and to make it easier to see what elements are being selected at a glance, I will alphabetize and break the selectors on two separate lines like so:

#ParentDiv input,
#ParentDiv label {
    display: inline;
}

Also, this should work just fine in IE 6/7/8, and is valid according to w3c.

Solution 2 - Css

For me, the above answer did not help me. I wanted to style a table header so I had to append the table tag before the id like this:

table#table_id th {
  width: 20%;
}

I hope this will help someone down the line.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionToran BillupsView Question on Stackoverflow
Solution 1 - CsscdeszaqView Answer on Stackoverflow
Solution 2 - CssDev_mjmView Answer on Stackoverflow