MHunt Design Freelance Web Solutions

I put together a list of some nice css selectors.

More Browsers are starting to support CSS3.

Multiple background images for one element

1. .box {
2. background-image: url("top-left.gif"), url("top-right.gif"), url("bottom-left.gif"), url"(bottom-right.gif");
3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
4. background-position: top left, top right, bottom left, bottom right;
5. }

Source: 24 ways

Media Querie

This Media Query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:”

1. @media screen and (min-width: 400px) and (max-width: 700px) {
2. property:value;
3. }

This Media Query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

1. @media handheld and (min-width: 20em) {
2. property:value;
3. }

Source: wc3

Sibling Selectors

Sibling Selectors will make it easy to style elements without having to add so much markup. Extra divs would not no longer necessary.

Child Selector (CSS2)

Matches all li’s that are immediate children of the ul.

1. ul>li {
property:value;
}

Adjacent Sibling Selector(CSS2)

This example targets the p when h2 is an adjacent sibling.

1. h2+p {
property:value;
}

General Sibling Selector (CSS3)

This example will match a p element if it’s a sibling of an h2 element

1. h2~p {
⋮ property:value;
}

Pseudo Elements

Some of these are really cool, it’s more posssible to target almost any element without using classes or wrappers.

1. :first-letter
   represents the first character of the first line of text within an element
2. 
:first-line
   represents the first formatted line of text
3. 
:before
   specifies content to be inserted before another element
4. 
:after
   specifies content to be inserted after another element
5. 
::selection
   represents a part of the document that’s been highlighted by the user

Psuedo Classes

1. :nth-child(N)
   matches elements on the basis of their positions within a parent element’s list of child elements
2. 
:nth-last-child(N)
   matches elements on the basis of their positions within a parent element’s list of child elements
3. 
:nth-of-type(N)
   matches elements on the basis of their positions within a parent element’s list of child elements of the same type
4. 
:nth-last-of-type(N)
   matches elements on the basis of their positions within a parent element’s list of child elements of the same type
5. 
:last-child
   matches an element that’s the last child element of its parent element
6. 
:first-of-type
   matches the first child element of the specified element type
7. 
:last-of-type
   matches the last child element of the specified element type
8. 
nly-child
   matches an element if it’s the only child element of its parent
9. 
nly-of-type
   matches an element that’s the only child element of its type
10. 
:root
    matches the element that’s the root element of the document
11. 
:empty
    matches elements that have no children
12. 
:target
    matches an element that’s the target of a fragment identifier in the document’s URI
13. 
:enabled
    matches user interface elements that are enabled
14. 
:disabled
    matches user interface elements that are disabled
15. 
:checked Pseudo-class
    matches elements like checkboxes or radio buttons that are checked
16. 
:not(S)
    matches elements that aren’t matched by the specified selector

Source: Sitepoint

Related posts:

1. Forcing Internet Explorer to obey css using Javascript, CSS hacks and specific style sheets
2. 5 ways to optimize the performance and speed of your website
3. Web Design Resources: January 19th through January 23rd

This entry was posted on Wednesday, April 23rd, 2008 at 12:19 am and is filed under CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.