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

I created a list of the best web design, development, and management books out there. No particular order of importance was assigned to these. I own all of these except Jason Beard’s Principles of Beautiful Web Design. His book is more for developer’s looking for help on aesthetics of websites. Anyone working freelance, I highly recommend Freelance Switch’s How to be a Rockstar Freelancer. As for CSS, nothing compares to CSS Mastery. Site Point’s Ultimate CSS Reference is a handy book to have for any web development team.

1. CSS Mastery (February 2006)
2. The Principles Of Project Management (March 2008)
3. Communicating Design: Developing Web Site Documentation for Design and Planning (September 2006)
4. The Principles of Beautiful Web Design (March 2007)
5. The Ultimate CSS Reference (February 2008)
6. How to be a Rockstar Freelancer (February 2008)
7. DOM Scripting (September 2005)
8. Web Design and Marketing Solutions for Business Websites (August 2007)
9. Web Standards Creativity (March 2007)
10. Transcending CSS: The Fine Art of Web Design (November 2006)