CSS Selectors: Type, Class, and ID. Have questions?
Discuss this HTML tutorial with others on the forums. By now, you probably know that you use CSS styles to alter the look of your HTML document. The way CSS bobs and weaves through your document to style the right elements is both fascinating as well as useful for you to understand if you want to create great looking applications and web sites. In this tutorial, you will learn how common CSS selectors work to map a particular rule to elements in your document. We will start off by deconstructing and understanding very simple examples and then moving to more complicated examples that you will encounter...in the wild! Note If any of the CSS terminology such as selectors and rules is unfamiliar to you, check out the Anatomy of a CSS Style 101 article for a quick introduction. A Simple Selector Let's first start by looking at a simple rule whose selector applies to all p tags: <style> p { font-family: Cambria, serif; font-size: xx-large; } </style> <p>Do or do not...there is no try.
Specificity. It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts arising.
More Specific = Greater Precedence If the selectors are the same then the last one will always take precedence. For example, if you had: The text in the box of p elements would be colored blue because that rule came last. However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). In this example it might seem that a p within a div would be colored blue, seeing as a rule to color p boxes blue comes last, but they would actually be colored red due to the specificity of the first selector. Calculating Specificity The actual specificity of a group of nested selectors takes some calculating. CSS Structure and Rules. [ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ] Basic Syntax Rules Selectors Any HTML element is a possible CSS1 selector.
The selector is simply the element that is linked to a particular style. Is P. Class Selectors A simple selector can have different classes , thus allowing the same element to have different styles. The above example has created two classes, css and html for use with HTML's CODE element. <P CLASS=warning>Only one class is allowed per selector. Classes may also be declared without an associated element: In this case, the note class may be used with any element.
A good practice is to name classes according to their function rather than their appearance. ID Selectors ID selectors are individually assigned for the purpose of defining on a per-element basis. Child and Sibling Selectors. Do you know what the difference between these selectors are?
I'll admit it took me longer than it probably should have (way back when) when I was learning the basics of CSS. In both cases, they are selecting list items that are children of unordered lists. But there is a difference between children and descendants. The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. I think everyone understands the basic decendent selector, but let's do a quick overview of the other selectors in this style: the child combinator, the adjacent sibling combinator, and the general sibling combinator.
Child combinator This one we covered in the intro to this article. I think the nested list is a perfect example of why this selector is useful. Adjacent sibling combinator An adjacent sibling combinator selector allows you to select an element that is directly after another specific element. Common Problems Using CSS Descendant Selectors - Nested Lists and CSS Descendant Selectors. One of the first things that most designers forget about CSS descendant selectors is that they are flexible. When CSS defines a descendant, it doesn't care whether the tag in question is the direct child, the grandchild, or some great-great-great-descendant of the initial element. In each of the following examples, the span tag is a descendant of the p tag: But who cares? I mean, does it really matter whether the descendant is a child or a great-grandchild of the first element?
After all, if the span tag is inside the p tag, it's a descendant and you'll want to style it - even if the HTML goes: Where the Descendant is Can Make a Difference One of the most common occurrences of descendants making a difference is in nested lists and tables. <ol><li>An ordered list</li><li>With 3 elements</li><li>And one nested list inside it: <ul><li>An unordered list</li><li>With 2 bullet points</li></ul></li></ol> This CSS forces the nested undordered list to become ordered.