Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

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
0
jxbma
Asked:
jxbma
1 Solution
 
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 MVEDeveloperCommented:
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
 
duttcomCommented:
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
 
jxbmaSoftware ConsultantAuthor Commented:
Perfect!

Thanks so much

JB
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now