Selectors in CSS
This section will deal with the basic selectors in the CSS2 specification. We won't get into more advanced selectors just yet, but this should give you a good idea of the different elements you can manipulate with CSS.
Different Varieties of Selectors.
There are several different sorts of selectors. You can select and modify just about anything in your HTML document with CSS. Have a gander at all of them:
The Basics
Element Selectors
Element selectors are the easiest selectors to get a grasp on. They grab html elements. Like <p> and <a> or even <body>. Just about any HTML element can be selected with element selectors. The syntax is simple too.a {
color: green;
}
p {
color: green;
}
Those are two examples of element selectors. The first will select all HTML elements marked as a's and turns them green. The second does the same for elements marked as p's.
ID/Class Selectors
You'll be using ID and Class selectors often. They select any HTML element marked with a specific ID or Class attribute. For example, say you have a group of links that you want styled a certain way but you also have another group of links you want styled a different way. You can use an element selector because you have 2 seperate styles. What you use is a class. Mark up your links with a class attribute like so:
<a href="link" class="link_group1">Link Group 1</a>
Then use CSS code like this:
.link_group1 {
color: green;
}
The . tells the browser you are selecting a class called link_group1. Classes are used over multiple elements. You can have several elements with the same class. ID's however can only be applied to one element per page. Let's say you have a header image at the top of your page. You want that image to be have amargin of 5 pixels. Just add this id attribute to the img tag:
<img src="header" id="header" />
And this CSS to the stylesheet:
#header {
margin: 5px;
}
ID's use # to tell the browser that it's an ID. This selector will select an ID that is equal to header. You can only use an ID once per page. You code will not validate if you use it more than once.
Decendant Selectors
Element selectors give us a very bulky control over the apperance of web pages. Descendant selectors allow us to fine tune that control just a little bit. They select all instances of an element that is a child of another element. If you wanted to select all images that were used as links and do away with their borders, but wanted all other images to have borders you use a descendant selector. Sure, you could use a class selector, but then you'd have to manual change all the HTML. This way you only have to change the style sheet. The syntax looks something like this:a img {
border: none;
}
img tells the browser to look for all image elements and get rid of their borders. The a narrows the search down to only images that are nested inside of a elements. You can go 3, 4, or even 200 deep if you want. CSS will keep narrowing the search for as many tags as you tell it too. Here's an extreme example.
html body div p a img {
border: none;
}
That eleminates link image borders just like the other, but only on images that are in a p tag, within a div, in the body of your html page. You could go even deeper, but I doubt you'll have aneed to.
This brings our article to an end. Next time we'll discuss pseudo selectors.
There are several different sorts of selectors. You can select and modify just about anything in your HTML document with CSS. Have a gander at all of them:
The Basics
- Element
- ID/Class
- Descendant
- Link
- Pseudo Element
- Dynamic
- Language
- Child
- First-Child
- Adjacent
Element Selectors
Element selectors are the easiest selectors to get a grasp on. They grab html elements. Like <p> and <a> or even <body>. Just about any HTML element can be selected with element selectors. The syntax is simple too.
ID/Class Selectors
You'll be using ID and Class selectors often. They select any HTML element marked with a specific ID or Class attribute. For example, say you have a group of links that you want styled a certain way but you also have another group of links you want styled a different way. You can use an element selector because you have 2 seperate styles. What you use is a class. Mark up your links with a class attribute like so:
Decendant Selectors
Element selectors give us a very bulky control over the apperance of web pages. Descendant selectors allow us to fine tune that control just a little bit. They select all instances of an element that is a child of another element. If you wanted to select all images that were used as links and do away with their borders, but wanted all other images to have borders you use a descendant selector. Sure, you could use a class selector, but then you'd have to manual change all the HTML. This way you only have to change the style sheet. The syntax looks something like this:
This brings our article to an end. Next time we'll discuss pseudo selectors.
