Remember that there are a few ways to target your list:
Create a ul tag-only style which will target every unordered list on the site. Depending on your goal this may be too general.
Target the parent element: #archive-wrapper ul so only an unordered list that’s a child of the parent ‘archive-wrapper’ will pick up the styling.
Add a class or id to the
element and target that. Example,
would be ul.myList.
They are all valid, it just depends on what you’re doing and how you work.
If I remember the book correctly such things are touched on in the context of CSS. As you can see you can’t be proficient with CSS unless you’re able to determine what you need to target.
Todd
Thanks Todd. I appreciate you taking the time to walk me through that. Had you just given me the answer I wouldn’t have learned a darn thing.
Is this all covered in the “Bulletproof Web Design” book or do I need something else?
Create a new style and in the Tag field enter the above then Tab out and also Tab out of the Name field (which must be blank/empty). Then just add your style attributes like you normally would.
Okay, here’s another challenge. I want to style the radio button text on this page. In looking at the code it looks like the radio buttons are wrapped in div.foo. How would I target this?
.foo input. That will style any form input radio and text field that’s a child of the parent element with a class of ‘foo’. Might be too general.
If you want to specify only radio buttons with the parent of .foo use: .foo input[type=‘radio’]
You could also target the type directly (no parent): input[type=‘radio’] which would apply to all radio buttons everywhere (even the ones on Ernie’s site. Just kidding).
Or again, if the tag had a class (you would need to add it) you could also target that for added specificity. For example: would be: input.myRadio.
Are you starting to see how to chain a series of elements, classes and ids together to form a CSS selector?
Options, options, everywhere options.
Todd
Okay, here’s another challenge. I want to style the radio button text on this page. In looking at the code it looks like the radio buttons are wrapped in div.foo. How would I target this?
Yes, that’s one way. But as I said, using just ‘.foo input’ will affect text fields as well as radio buttons, so you may want to use .foo input[type=‘radio’]. Or just add a class to the radio buttons and target that instead.
Remember it’s not always necessary to include the parent element in the selector, though it will depend on the situation. As a general rule you don’t want to get overly specific with your selectors if you don’t need to.
Todd
I think so. So, would I target it the same way as we did the #archive-wrapper style, but with .foo input?
A form is a semantic powerhouse. A properly constructed one has a very deliberate and repeatable structure made up of a few sub-structures, one of those being the tag. It’s worth learning how that structure is formatted because it will make targeting elements much easier.