Thursday, 6. August 2009
Child selectors
Child selectors are used to selected an element that is a direct child of another elements parent. Child selectors will not selected all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>
*Child selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
div > em {
color: blue;
}
Adjacent sibling selectors
Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an <h3> element, but only <h3> elements that immediatly follow an <h2> element. This is a commonly used example because it has a real-world application. There is often to much space between <h2> and <h3> elements when they appear immediately after each other.
*Adjacent selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
h2 + h3 {
margin: -1em;
}
Attribute selectors
Attribute selectors are used to select elements based on their attributes or attribute value. For example, you might want to select any image on an HTML page that is called “small.gif”
*Attribute selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
img[src="small.gif"] {
border: 1px solid #000
}
Pseudo-elements
Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is not a way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements.
*Pseudo-elements selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
p:first-line {
font-weight: bold;
}
p:first-letter {
font-size: 200%;
font-weight: bold;
}
Pseudo-classes
Pseudo-classes enable you to format items that are not in the document tree. They include :first-child, :link, :visited, :hover, :active, :focus, and :lang(n). Pseudo-classes will be covered in later posts.
Posted in CSS Selectors by frenchsquared -
Thursday, 6. August 2009
Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used.
*{
margin: 0;
padding: 0;
}
Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element.
p * {
color: red;
}
Posted in CSS Selectors by frenchsquared -
Wednesday, 5. August 2009
Sample HTML
<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>
<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>
Descendant Selectors
Descendant selectors are used to selected elements that are descendants of another element
For example, in the HTML sample shown above, three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used. This selector targets any <a> element that is nested inside an <li> element.
li a {
color:green;
}
Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id=”nav”> as well as the <li> element. This means that #nav a can be used as a selector as well.
#nav a {
color: red;
}
Descendant selectors also can include multiple levels of descendants to be more specific.
#nav ul li a {
color: green;
}
Posted in CSS Selectors by frenchsquared -
Tuesday, 4. August 2009
Selectors are one of the most important aspects of CSS because they are used to “select” elements on an HTML page so the can be styled.
Sample HTML
<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>
<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>
CSS Type Selectors
Type selectors will select any HTML element on a page that matches the selector. In the HTML shown above there are seven HTML elements that could be used as type selectors, includeing <body<, <div>, <h1>, <p>, <ul>, <li> and <a>. For example to select all the <li> elements on the page, the <li> selected is used.
li {
color: blue
}
CSS Class Selectors
Class selectors can be used to select any HTML element that has been given a class attribute. In the HTML sample shown above there are two HTML elements with class attributes <p> and < href =”#”>. To select all instances of the intro class, the .intro selector is used.
.intro {
font-weight: bold
}
You also can select specific instances of a class by combining type and class selectors. For example, you might want to select the <p> and the <a href=”#”> seperatly. This is done using p.intro and a.intro.
p.intro {
color: red;
}
a.intro {
color: blue;
}
ID Selectors
ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed. In this CSS, How To Tutorial IDs are used to identify unique parts of the document structure. such as the content, navigation and/or footer. In the HTML sample shown above, there are three IDs: <div id=”content”>, <div id=”nav”>, <div id=”footer”>. To select <div id=”nav”>, the #nav selector is used.
#nav {
color: blue;
}
Posted in CSS Selectors by frenchsquared -
Thursday, 30. July 2009
CSS How To offers straightforward, practical answers when you need fast results. CSS How to has been organized into a series of short ten-minute tutorials. These CSS Tutorials clearly explain the key concepts of CSS and carefully shows you how to put them to immediate use.
All the CSS code found at CSS how to has been verified to work with the major current browsers, and we even show you how to avoid several infamous bugs, as well as how to troubleshoot your CSS.
Posted in CSS Selectors by frenchsquared -
