Solved

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

Posted on 2013-12-08
5
263 Views
Last Modified: 2013-12-08
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
Comment
Question by:jxbma
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39705088
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
 
LVL 1

Author Comment

by:jxbma
ID: 39705107
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39705136
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
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
ID: 39705137
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
 
LVL 1

Author Closing Comment

by:jxbma
ID: 39705212
Perfect!

Thanks so much

JB
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question