CSS Selectors…learning something new is good!

Let be start off by saying the code I put up in my last post was wrong, it is corrected now. Didn’t realize it until I started clicking through some older posts a little bit ago, and noticed that EVERY link was getting a new tab. The code I wrote made it so that every href that started with ‘http’ should have target=”_blank”. I assumed the links within my blog would be relative, not absolute. WordPress got me on that one. Now it hits every href that does not contain my web address. Silly me.

Today I had to style/build a couple of pages my boss designed in Photoshop (which by the way, I really like – very clean design). The first one was easy because it contained a form, which had all the elements on the page for me to see. I had styled a submit button using a selector that finds an element that has a type = to something. This is what I used:

#divID input[type="submit"]

Now, when my boss saw it, he said “You could have just put an id or class on it.” Which is true, I could have, but I wouldn’t have learned anything. Styling it like that saved me on the second page. Why? Because the form on the second page was put in dymaically and didn’t have any ids or classes, but because of the above CSS, it still hit.

That CSS is basically saying look for an input within a div with and id of #divID, that has a type of “submit”. Pretty easy, but cool. Selectors are awesome, but each browser supports different things.

Here are a few more that could come in handy. Ever see the ‘+’ sign? Like this:

h1 + p {color: #ffffff;}

That means that any ‘p’ tag that comes directly after an h1 tag should be colored white. You could also get more specific with that, like this:

h1.blue + p {margin: 20px 0 0;}

The above is targeting an ‘p’ tag, that comes immediately after an ‘h1′ tag, with the class of ‘blue’ should get a margin-top of 20 pixels.

Another of my favorites is the :first-child pseudo class. I use this one in dynamically created lists.

ul li { border-left: 1px #000000 solid; display: inline; }
ul li:first-child { border: none; }

This gives every list-item a border on the left side, but the first li does not. The opposite :last-child could have been used with border-right, but :last-child does NOT work in IE7.

Another thing I learned recently is that you can chain pseudo-classes, like so:

li a:focus:hover { color: #ff0000; }

That gives the focus and hover the same color. Be aware that you have to use them in the correct order (LVHA) – :link:visited:hover:active.

Some other selectors that would be neat, say for a news blog or something going for an old time classy look would be :first-letter. That will target the first letter of what ever element you chose. For instance:

p { font-size: 12px; }
p.large:first-letter { font-size: 24px}

The first letter of a paragraph tag, with the class of large, will be 24px, while the rest of the paragraph will be 12px. Not something you would use often, but still cool to know that its out there.

So, try them out, and start using them. Selectors come in handy when you have things that are put in dynamically, and do not have id’s or classes on them. The problem though is what browsers support them. For a good list of what is supported in each, check this link out.

Tags: ,

2 Responses to “CSS Selectors…learning something new is good!”

  1. I really only use selectors for the inputs. Those things SUCK to style cross browser.

  2. jcDesigns says:

    Oh, I know. I do quite a bit of input styling.

Leave a Reply