Chris Love's Official ASP.NET Blog : Using CSS Selectors

Using CSS Selectors

Over a final year we have been spending a lot of time re-learning how to make make make use of of of CSS. Since ASP.NET was released a make make make use of of of of Web Controls had finished me CSS as great as HTML ignorant. With a appearance of ASP.NET MVC as great as JQuery total with a increasing approach for richer user experiences we knew we had to tackle this deficiency immediately. Hence my adventure in to my Thin ASP.NET series. It took me a while since we only did not understand how CSS selectors essentially work. When we proposed regulating JQuery it eventually popped for me as great as we really proposed to get it. There have been 3 elemental CSS selectors which only about any a single which has finished any web work understands, type, category as great as DOM Id.

The Type Selector

This should be a most obvious selector since it sets a default order to be followed for a specified component (I really call them component selectors, though which is not technically correct, they have been Type selectors). For e.g. a following order designates a text contained inside of a <P> component will be a size of a containing elements font size definition as great as a texts tone will be black.

This is a great start. Today, sites which follow CSS best practices conclude a CSS Reset in a tip of a file. Basically this is a set of manners which conclude a default blueprint behavior of those elements in a page. The pushing reason during a back of this technique is to take carry out over a default digest manners from a browser, as a result eliminating most of a frustrating differences in between browsers. Personally we have motionless to adopt a YUI CSS Reset from Yahoo as my default reset, though there have been most others accessible as great as of course we can conclude your own.

The Class Selector

This order defines a CSS order for any component which defines a category be applied. we see this technique almost abused during times by ASP.NET developers as we desperately try to overcome insufficient ASP.NET carry out rendering. Like a prior e.g. we can conclude a CSS category to enforce a same digest logic:

A CSS category is tangible with a . prefix as great as can be declared anything we want. To request this order to any HTML component all we need to do is include a category charge as great as set it equal to a category name. Something we learned in a final year is a capability to conclude mixed category manners for an component in a category attribute. This comes in genuine accessible when assigning JQuery plugins.

For an ASP.NET web carry out we allot any category manners in a CSSClass property, which in conclusion renders a category charge with those values.

The ID Selector

The final selector sort finds a DOM component by Id or a assigned name of a element. So in a examples upon tip of we can conclude a order for a specific submit element. The Id selector is prefixed with a # in a order definition.

This time instead of needed a category charge there is no need to set this value. The CSS Rule will only be automatically applied. In this e.g. we most likely do not wish to conclude a order only for a txtFirstName component since this is as great specific since a CSS order would most likely need to be practical to most alternative elements as well. But there is nothing observant we cannot do this as great as we will show we a small tricks to conclude a same order for mixed selectors later in a post.

Combining Selectors

This is where we see CSS novices remove a effectiveness of CSS selectors upon their page. Instead of leveraging a genuine power of CSS selectors they will spawn their markup with category attributes which have been duplicated over as great as over in a page. The following e.g. is a elementary login component with E-Mail as great as Password submit elements. we am defining a category attributes for both in a really inefficient approach by duplicating a effort.

The markup uses a category order to ensure both a inputs demeanour similar. But we have a small wasted code here. What if we tangible an id for a <ul> as great as total a couple of component selectors for a CSS rule? That could be really efficient since we would only need a elementary name as great as rule. In this case this is known as a successor selector since it specifies this order be practical to any INPUT component which is a child of a LI which is a successor of a UL component called loginElements.

The markup could now demeanour similar to this:

That is in conclusion reduction text being sent to a browser upon any page request as great as a some-more specific rule. It additionally helps us out by applying a same character to any alternative submit fields we competence wish to add, consider about adding an OpenId margin or maybe a third identifier. This really comes in accessible upon longer forms.

The capability to mix mixed selectors can additionally be finished with category names as well, in actuality we can mix as most selectors as we wish in only about any multiple we can mental condition up. It does take a small practice though we can get genuine specific with your selectors as great as which in conclusion gives we surgical pointing to conclude how an component will render.

In a login form e.g. we competence not anxiety a component id, though maybe conclude category to follow in a <ul> element. In which case a CSS order competence demeanour similar to a following:

This is all great as great as good, though we forgot something! There have been no labels in a form to discuss it a user what to enter, so lets supplement them.

Now we need a CSS order to conclude how a labels have been starting to render. No problem, we can conclude a identical order as a submit rule. In actuality we am starting to make make make use of of of a exact same order by stacking a selectors upon a rule.

I call it stacking since we consider it reads improved when they have been built upon tip of any other. The central tenure is Grouping. But this is not great sufficient for me, we consider we still need to conclude a small some-more CSS manners for a tab as great as a submit elements to make them blueprint nicely. The following manners cause a labels to be 75 pixels wide as great as boyant left, meaning they will all line up along a left side. The text additionally aligns left.

Now a form is starting to demeanour better! And we demonstrated an additional feature with CSS selectors, a capability to conclude some-more than a single order for a CSS selector. There is no limit to a number of manners we can define. If we read my final post upon a Development Tools built in to IE 8 we have seen it give we a visual trace of a CSS manners which have been practical to an component as great as what selector practical a rule.

Sibling Selectors

Now we am only starting to get fancy with we as great as show off. One of a coolest things in CSS selector syntax is a capability to conclude manners to be practical to an component formed upon elements which have been sitting right subsequent to it, or a siblings.

The approach to conclude a kin selector is to place a + in between a left kin as great as a right sibling. So a kin order looks similar to A + B where B is a aim of a rule.

Applying which order to a following Markup renders a divide with a blue background. The H1 as great as P tags have been siblings inside of a parent DIV tag.

Sibling Selectors

Unfortunately we cannot go a alternative approach with siblings. So defining a order for P + H1 will not concede we to conclude a character practical to an H1 tab which has a P subsequent to it similar to a HTML above.

Similarly we can conclude successor selectors where a initial selector order is rught away followed by a selector. So DIV P designates any divide inside of a DIV element. You could additionally appropriate DIV > P to name any divide which is a approach successor of a DIV element.

Attribute Selectors

Attribute selectors have been an additional flattering sweet selector pretence we similar to to use. This gives we a capability to conclude a selector which relates to an component which contains an charge assembly a criteria. You can conclude an selector which says a component only has to have a charge tangible [att]:

or an charge with a specific worth [att=val]:

or an charge with during slightest a single worth relating a worth [att~=val]:

Finally we can compare values formed upon denunciation specification [att|=val]. This a single is special since a worth contingency be followed by a . So we would typically compare upon a lang attribute. So a character of P[lang|=en] would compare all English denunciation types.

Pseudo-Class Selectors

Pseudo-classes capacitate we to appropriate a order for an component formed upon a small charge which is not partial of a request tree. Well which depends upon a approach we appreciate a request tree indication we theory since we can appropriate styles formed upon position next an component with selectors such as first-child, etc. So receiving a e.g. from a kin selector we could conclude a selector which would only request to a initial divide inside of a parent DIV similar to a following:

Other pseudo-classes request to <A> tags, :link, :visited. This gives we carry out over how links which have been visited differ from links which have not been visited by a user. These have been substantially flattering common to most web developers as have been a :hover, :active as great as :focus pseudo-classes since examples of these have all been finished for hyperlinks for as prolonged as we can really remember.

They all give we some-more granular carry out over how character manners have been practical to elements formed upon where a users mouse or concentration is placed upon a page. You should note which :hover should be placed after :link as great as :visited since a tone property would be hidden otherwise. Also make up classes can be total similar to a:focus:hover.

Psuedo-Element Selectors

Similar to a Pseudo-class selectors there have been selectors which really magnify a capability to carry out digest formed upon a position of a calm inside of an element, pseudo-elements. This is how we see things similar to a really vast collateral minute during a beginning of a divide or a opposite font or background image for a initial line. The :first-letter pseudo-element allows a specific order for a really initial character.

Adding a following selectors to a e.g. changes a initial character as great as initial line of a paragraph:

Which produces a following effect when it is rendered:


With so most tender power during our disposal to carry out a blueprint as great as digest of any page mastering CSS Selectors is a contingency have skill for any web developer. we goal this post can be used as a anxiety request for we starting forward. And from now upon we goal we have a certainty to carry out your blueprint with CSS as great as not carry out attributes or even worse inline character definitions. we consider we will additionally find which your markup is most some-more maintainable. Changes to your blueprint will additionally be most simpler to accomplish.

Look for an additional post upon defining selectors to work with ASP.NET web controls as great as a small of their quirks in a subsequent couple of days.

This calm has upheld by