CSS selectors are used frequently in web development. Moreover, they are basics of website coding. Before moving to advanced CSS topics, every beginning web developer should understand them well.
Introduction
CSS selectors are an essential part of the website’s markup. Basically, CSS selectors are part of the CSS rules matching an element (if ID) or set of elements (if class) within an HTML document. Roughly, CSS selectors can be divided into basic and advanced categories, but this article will discuss only the basic ones, since the majority of developers will unlikely use the benefits of advanced selectors.
Universal Selector
The first CSS selector discussed is the Universal selector. The purpose of this selector is to match any element type. This selector uses the * sign, and its syntax is equivalent to the following:
* {
declarations
}
For example, if a developer wants to apply the margin:0; property to every element in an HTML document, the following line of code should be used:
* {
margin: 0;
}
Furthermore, consider the following example using the div * b selector:
Bold Againbut immediate child of the div tagBoldSelector
In this example, div * b selector (and corresponding declarations) will match Bold, but it will not match Bold Again, since it is an immediate child of This example is provided to demonstrate the fact that the universal selector should never be confused with a wildcard character, since it does not match “zero or more elements.” An element type selector matches only the elements using the corresponding element type name. The basic syntax for this type of selector follows: E { declarations } For example, if the developer wants to apply padding:0; to all elements within the document, the following piece of code should be used within the CSS stylesheet: li { padding:0; } Class selectors are used frequently in web development, offering a great way of applying one style to several HTML elements. This type of selector is declared by using the . sign before the desired class name. The basic syntax follows: .className { declarations } It is not allowed to use whitespace between . and the class name. Furthermore, the following method can be used as well: p.title { declarations } If this line of code is used, the properties of the “title” class will be applied to all elements whose class attribute is set to “title”. In order to create a selector that will match particular elements within an HTML document, the ID selector should be used. Specifically, an ID selector will match only the elements whose ID attribute is set to that ID selector. Furthermore, it is important to note that ID selectors are unique (their values unique) and as such, ID selectors cannot match more than one element in an HTML document. ID selectors use the # sign, and the basic syntax follows: #IDName{ declarations } For example, if a developer wants to define a specific set of CSS properties for the footer, the following piece of code should be used: #footer { declarations } Since an ID selector identifies an HTML element
uniquely, it should be used “only” when necessary; in other words, a developer should consider carefully when to use an ID selector and when to use a class selector. Examples of “unique” (where the ID should be used instead of the class) HTML elements are the footer, header, content, main, sidebar and similar “core” elements of the website. Furthermore, it is possible to use an ID selector in the following way: ul#footer { declarations } This line of code will apply only to an unordered list element whose ID attribute value is equal to footer. As it is the case with class selectors, whitespace between # and ID name is not allowed. Still writing your password on sticky notes? Do you use the same password for multiple sites? Why not use a password … Do you have a limited data cap for your internet connection or are tired of seeing endless ads on your computer? … Adblock Plus is obviously having an impact on Facebook’s revenues as Facebook recently changed the way they code ads on …Element Type Selector
Class Selector
ID Selector
Using LastPass to Keep Passwords Safe
Installing and Using Ablock Plus
Ad-blocker Versus Facebook – the Fight for User’s Rights