Member Avatar for Sailor_Jerry

What's the proper format?

Also does anyone know where i can find a good CSS online reference besides W3Schools?

Current Code.

.className td {border: 1px solid #CCC;}
.className th {border: 1px solid #CCC;}

i want to save some characters... would this be valid?

.className td th {border: 1px solid #CCC;}

or

.className td, th {border: 1px solid #CCC;}

or

.className td, .className th {border: 1px solid #CCC;}
  • 6 Contributors
  • 6 Replies
  • 253 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Short answer: both the scoped grouping and the fully‑qualified grouping are valid CSS — but they mean different things. A comma separates independent selectors, so leaving the class off the second selector makes that selector apply site‑wide (not scoped to the class). A selector that chains one element then another (the descendant combinator) matches elements nested inside others (for example, a selector that looks for a header cell inside a data cell would require a <th> to be inside a <td>, which is not how table markup is normally structured). See the MDN notes on selector lists and the descendant combinator for the formal definitions. (developer.mozilla.org)

Best practice for tables: put the class on the table itself and prefix both cell selectors with that table selector so both header and data cells are clearly scoped. Grouping the two selectors with a comma keeps the rule compact while making the scope explicit. Grouping does not alter specificity — each selector in the list is evaluated independently, so specificity follows the usual rules. Example (keeps markup semantics clear and collapses borders for a single grid look):

table.my-table {
  border-collapse: collapse;
}

table.my-table th,
table.my-table td {
  border: 1px solid #ddd;
  padding: 6px;
}

For learning and compatibility checks, the modern authoritative CSS reference is MDN Web Docs — CSS and browser support can be checked at Can I Use. Both are safer long‑term choices than some older tutorial sites. Also note the useful links already mentioned in the thread (thanks to , ) and the clear scoping explanation from that distinguishes scoped vs global selectors. (developer.mozilla.org)

Recommended Answers

All 6 Replies

Member Avatar for Sailor_Jerry

nevermind

This is valid in CSS.

.className td, .className th {border: 1px solid #CCC;}
Member Avatar for T0clcl

If you're still looking for a good online CSS reference, these are the ones I use most often:

Member Avatar for Dani

Yes, I use that latter version as well.

Member Avatar for thinksmart12

I use the
.className td, th method myself.

Member Avatar for Arkinder

Both .className td, th {border: 1px solid #CCC;} and .className td, .className th {border: 1px solid #CCC;} are valid. They simply tell the browser different things.

The first states that the styles should be applied to any td element within an element with a class of className , and any th element within the document. The second states that the styles should be applied to any td element within an element with a class of className , and any th element within an element with a class of className .

If that doesn't make sense I can post an example.


Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.