How can I format all td elements contained in a table with class myclass in CSS?
I want a format rule which applies to <table class="myclass"><td>FORM开发者_StackOverflow中文版AT THIS</td></table>.
With a descendant combinator (represented by a space character):
table.myclass td { — }
Don't this simple css will do it?
.myclass td{}
table.myclass td { color: blue }
Your table is missing a tr
element by the way.
as far as i am aware you would do this
table.myclass td { styles in here }
table.myclass td { ... }
...........
table.myclass td{
/* your styles */
}
Have a look at CSS selectors for more info.
table#myid td { color: blue }
//each td in an individual table with id myid
table could be dropped but i kept it for semantics.
#myid.myclass td { color: blue }
*//each td in anything with an id of myid and class of myclass. "is an" id(myid) that "has a" class(myclass) ;-) *
things become fun especially when one starts playing with nth-child(x) etc inside "tables"!
the issue seems to be more a case of "Scope" than actualy assigning any css. By assigning an id you limit .ie control the scope to an unique element, use class when you intend to extend scope to all elements sharing a class. So theoretically you only need to specify the .myclass td{ etc } , however i just wanted to affirm your intentions and reasoning, happy coding.
But yes i agree, please have a look at css selectors, and jquery( Sizzle). It's easy and so ..... powerful. :X
CSS Selectors - INCLUDING THE CSS VERSION EACH NEEDS!
It is useful to know different ways to use CSS combinators.
1.Descendant Selector (space): Matches all elements that are descendants of a specified element.
The following example selects all elements inside elements with .myclass class.
table.myclass td {
font-size: 1.25rem;
background-color: yellow;
}
2.Child Selector (>): Selects all elements that are children of a specified element.
The following example selects all elements that are children of a element with .myclass class.
table.myclass > td {
font-size: 1.25rem;
background-color: yellow;
}
Please take a look at CSS Combinators
精彩评论