This isn’t specifically DotNet, but if you are working with ASP.Net, you will probably come across the need to get your fingers dirty in CSS files. So, this is an explanation of a few of the most commonly used selector groupings. Everyone knows the basic three selectors are the HTML tag, the class, and the # (for a tag ID). That’s all good when they’re used by themselves, but sometimes they are used in a group, with different separation characters, and it’s good to know how to ‘read’ them.
> – child selector
Example: ul>li
– any li which is a child of a ul
, combination grouping selector
Example: p, td, .myClass
all items use the same css
” ” – space – Descendant selector
Example: #Yourid td
– any td inside a container/tag with #Yourid as the id
(descendant of the element with an ID of ‘Yourid’)
The descendant selector matches all td elements that are descendants of the container with #Yourid
no space with tag plus ID:
Example: ul#navigation
– only matches an unordered list element with an id attribute value that’s equal to “navigation”
a Period
Example: p.myClass
– match all p elements with a class named “myClass”
Adjacent Sibling Selector
Example: h2+p
– each tag/class, etc. The 2nd sibling must immediately follow the first and both be
inside the same parent element/tag.
General Sibling Selector (CSS3)
Example: h2~p
– the second must follow the first, but not immediately, and they both must be
inside the same parent element/tag.
(There are more than this I’m sure, especially with CSS3, so this is not meant to be an exhaustive treatise on CSS selectors.)
All Things DotNet Discussed – Winforms/ASP.Net/SharePoint/WPF
Leave a reply
You must be logged in to post a comment.