CSS Syntax & Selectors (basic → advanced)
The course is called CSS Selectors: The Secret Weapon of A Web Developer And it contains everything you need to know about knowing your selectors. That’s because if you want to design great websites, you need to know how these rules work. Clearly, without sensible use of CSS Selectors you won’t be able to style the elements that you want to change.
In this guide, we’re going to dissect the ins and outs of CSS Selectors, their various types and walk you through how they can be used in an effective manner on your projects.
1. The Anatomy of CSS Selectors
Before we get into more advanced targeting, let’s study the anatomy. A rule contains two sections, the CSS Selectors and the declaration block.
The selector is the HTML element which you wish to style. The properties and values are inside the declaration block, meanwhile.
A Basic Rule Structure:
CSS
selector {
property: value;
}
For example, to make all paragraphs blue, you use p as your selector:
CSS
p {
color: blue;
}
2. Basic Types of CSS Selectors
These are your basic ways of targeting. You will be using these precise Selectors on nearly every project you work on.
Type Selectors
These target everything of a certain type of HTML tag.
Example: h1 { … } selects all tags.
Class Selectors
Class selectors select elements with a specific class attribute. As a class can be applied to multiple elements these are powerful Selectors. You simply add a period (.) before the name.
Example: .my-class { … } selects <div class=”my-class”>.
ID Selectors
ID selectors target one element at a time with its unique id attribute. Recall: An ID must be unique on the page. And you write them prefixed with a hash sign (#).
Example: #header { … } refers to <header id=”header”>.
For a more detailed introduction to basic syntax, see MDN Web Docs CSS Selectors.
3. Using Combinators with CSS Selectors
Sometimes you have to get more prescriptive. Combinators enable your selectors to address elements in relation to other elements.
Descendant Selector (Space)
This grabs everything that’s within the given element.
Example: div p { … } selects all <p> elements within any <div>.
Child Selector (>)
This will select elements which are direct children.
For example, ul > li { … } will only select direct children <li> of a <ul> list.
Adjacent Sibling Selector (+)
This matches an element directly following another.
Example: h2 + p { … } will select the first <p> immediately following an <h2>.
4. Advanced CSS Selectors: Pseudo-Classes
Pseudo-classes can be used to style elements on their state. Advanced CSS selectors are always specified with a colon (:).
User Action Pseudo-Classes
:hover: If a user hovers their mouse over an element, it is targeted.
:active: Select an element the split second a user clicks on it.
Structural Pseudo-Classes
:first-child: Select the first child of an element.
:nth-child(n): Represents an element that is the nth child of its parent.
For all pseudo-classes, visit W3Schools CSS Reference.
5. Attribute CSS Selectors
For the most exact control, there are attribute-based Selectors.
[type=”text”] will only select input fields where the type is “text”.
[href^=”https”] it selects links which starts with “https”.
Conclusion
Knowing Selectors will enable you to write cleaner, faster code. In addition, learning combinator and attribute is a good way to style complex layout without creating tons of classes.
For additional free projects, please visit our Bootstrap Themes gallery.
Visit → https://codevigyaan.com/bootstrap-projects
Want HTML & CSS projects?
Open → https://codevigyaan.com/projects/
For free study material like lecture notes, previous year these and engineering ebooks?
Open → https://codevigyaan.com/free-e-books/
