CSS Selectors

CSS (Cascading Style Sheets) selectors are the architects of precision in web design. They allow you to precisely target and style specific HTML elements, granting you control over layout, appearance, and interactivity. In this guide, we’ll explore the world of CSS selectors, from the basics to advanced techniques, with examples to illustrate each concept.

Element Selectors

Element selectors are the simplest form of selectors, targeting all instances of a specified HTML element. For example:

p {
color: blue;

In this rule, all <p> elements in the HTML document will have blue text colour.


Class Selectors

Class selectors are denoted by a period followed by a class name and are used to style elements with specific class attributes. For instance:

.button {
background-color: #0077b6;
color: white;

To apply this style, an element must have the class attribute set to “button” like this:

<button class="button">Click me</button>


ID Selectors

ID selectors, indicated by a hash symbol followed by an ID name, are used to style a single, unique element in an HTML document. For example:

#header {
font-size: 24px;
color: #333;

In this case, only the HTML element with id="header" will receive the specified styles.


Descendant Selectors

Descendant selectors allow you to target elements that are descendants of a specified element. For instance:

div p {
font-weight: bold;

This rule selects all <p> elements that are descendants of a <div> element and makes their text bold.


Child Selectors

Child selectors are similar to descendant selectors but are more specific, targeting elements that are immediate children of a specified parent element. For example:

ul > li {
list-style-type: square;

Here, the rule styles only <li> elements that are direct children of a <ul> element.


Attribute Selectors

Attribute selectors allow you to target elements based on their attributes. For example:

input[type="text"] {
border: 1px solid #ccc;

This rule styles all <input> elements with type="text" attributes, adding a grey border.



Pseudo-classes target elements in a specific state or position. For instance:

a:hover {
color: #ff5733;

This rule changes the text color of hyperlinks when a user hovers the cursor over them.



Pseudo-elements target parts of elements, such as the first line of a paragraph or the first letter of a heading. For example:

p::first-line {
font-weight: bold;

This rule makes the first line of all <p> elements bold.

CSS selectors are the precision tools of web design, enabling you to craft intricate and visually appealing layouts. By mastering these selector types, you’ll gain the ability to precisely target HTML elements and apply styles that breathe life into your web pages. With creativity and precision, you can transform your web designs into engaging and interactive digital experiences.

Build something ULTIMATE!

About Us

Learn about HTML, CSS, SASS, Javascript, jQuery, PHP, SQL, WordPress. From basics to tips and tricks.

Connect With us

© 2023 Ultimate WebDev

This website uses cookies to improve your experience. By browsing this website, you agree to our cookies. Accept Read More