?
Solved

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

Posted on 2013-12-08
5
Medium Priority
?
265 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 53

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 2000 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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