Question 249978 in Html Question posted in
Some basic documentation can be found here.

Html – Combine multiple tags with a class-name

I have these css attributes.

table, td, th
{
  border: 1px solid;
  border-collapse: collapse;
  color: green;
}

But they should only be applied if table has a special class or id?

<table class="mycl">

All other tables should not get any of this.

How can I address that in the css?

I tried for class

.mycl table, td, th
{
  border: 1px solid;
  border-collapse: collapse;
  color: green;
}

but it did not work out. I am not sure how to combine the class with the multiple tags.

EDIT

Bases on the the current answers I get to this that does exactly what I want – only format the table with class mycl (and no other) and do it correctly (skip the mycl in the css and see).

table.mycl th, table.mycl td, table.mycl
{
  border: 1px solid;
  border-collapse: collapse;
  color:blue;
}

Is there any optimization to that?

Tags:

3

Answers


  1. 0

    This:

    .mycl table

    Means "a <table> which is a child/descendant of an element with the mycl class". To reference a <table> which has the mycl class, you’d combine the two:

    table.mycl
    Login or Signup to reply.
  2. 0

    I think that if your table has the class "mycl" you can use something like this:

    .mycl td, .mycl th {
   ... your css styles
}

    Here you specify that all the elements with class .mycl and have a td tag inside and th inside, should have those styles. But if you write:

    table, td, th { ... }

    Your saying that every table, every td tag and every th tag should have those styles.

    Login or Signup to reply.
  3. 0

    You are using incorrect syntax per CSS specificity rules.

    Specificity meaning the relevance of the property value you want to apply to an element.

    Using .mycl table means: apply the following styles to any .mycl class and to any table

    Using table.mycl means: apply the following styles to the table who contains the class name mycl

    If you want to apply a style to the table with class mycl then you want to use:

    table.mycl {
  border: 1px solid;
  border-collapse: collapse;
  color: green;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search