How do I combine IDs and component types in a CSS selector?

Hi:

I've got a question regarding selectors in the CSS style sheet.

I've got a series of selectors for table elements, but I'd like to have them associated with a specific table ID.

Consider the following code snippet:
table.tableSection {
  display: table;
  width: 100%;
}
table.tableSection thead, table.tableSection tbody {
  float: left;
  width: 100%;
}

table.tableSection tbody {
  overflow: auto;
  height: 150px;
}

table.tableSection tr {
  width: 100%;
  display: table;
  text-align: left;
}

Open in new window

How would I accomplish  this?

Thanks,
JohnB
LVL 1
jxbmaSoftware ConsultantAsked:
Who is Participating?
 
duttcomConnect With a Mentor Commented:
Not sure if this is what you are after, but you can include the ID in the class like so-

a.mainlevel#active_menu:hover {
color:#000
}
For a link element of class mainlevel with ID of active_menu

OR

ul#mainlevel-nav li a {
font-weight:700;
height:20px;
display:block;
}

For the li and a elements within an unordered list of ID mainlevel-nav
0
 
leakim971PluritechnicianCommented:
As you know, the selector for class is : .
the selector for ID is : #

Please note unlike CLASS attribute value, each ID attribute value MUST be unique in a document/page.
0
 
jxbmaSoftware ConsultantAuthor Commented:
Thanks, but your missing the point.
I know how to select via id, class and element types.

In the code snippet I submitted, I want to apply those style attributes to element types of a specific table.

So, I want to know how to COMBINE selectors for IDs and element types.

JB
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
table#MyTable.tableSection {
  display: table;
  width: 100%;
}
table#MyTable.tableSection thead, table.tableSection tbody {
  float: left;
  width: 100%;
}

table#MyTable.tableSection tbody {
  overflow: auto;
  height: 150px;
}

table#MyTable.tableSection tr {
  width: 100%;
  display: table;
  text-align: left;
}
<table id="MyTable" class="tableSection">
<tr><td>stuff</td></tr>
</table>

Open in new window

0
 
jxbmaSoftware ConsultantAuthor Commented:
Perfect!

Thanks so much

JB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.