Mastering CSS part 2: Selectors and Properties

In this article, we will take a comprehensive look at the basic building blocks of CSS, namely selectors and properties.

Topics

• Basic Selectors:
  • Element selectors
  • ID selectors
  • Class selectors
• Grouping and Combinators:
  • Grouping selectors
  • Combinators
• Pseudo-classes and Pseudo-elements:
  • Pseudo-classes
  • Pseudo-elements
• Universal and Attribute Selectors:
  • Universal selector
  • Attribute selectors

The Basic Building Blocks of CSS

Cascading Style Sheets (CSS) is a language that allows you to control the style of your web pages. It’s used to specify things like the font, color, size, and layout of your text, images, and other elements.

Selectors

Selectors are used to identify the elements that you want to style. They’re made up of a series of patterns that match specific elements in your HTML code.

Basic Selectors

There are three basic types of selectors:

1. Element Selectors:

These selectors match elements based on their tag name. For example, the selector p will match all paragraph elements on a page.

2. ID Selectors:

These selectors match elements based on their unique ID. IDs must be unique within a page, and they’re often used to select specific elements that need to be styled differently from the rest of the page. To use an ID selector, you use the # symbol followed by the ID of the element. For example, the selector #header will match the element with the ID header.

3. Class Selectors:

These selectors match elements based on their class name. Classes can be applied to multiple elements on a page, and they’re often used to select groups of elements that need to be styled similarly. To use a class selector, you use the . symbol followed by the class name of the element. For example, the selector .button will match all elements with the class button.

Examples

Here are some examples of how to use basic selectors:

/* Select all paragraph elements */
p {
  color: red;
}

/* Select the element with the ID `header` */
#header {
  background-color: blue;
}

/* Select all elements with the class `button` */
.button {
  font-size: 16px;
}

Specificity

When multiple selectors match an element, the browser uses a set of rules to determine which selector should be applied. This is called specificity.

The specificity of a selector is determined by the number of ID selectors, class selectors, and element selectors it contains. The more specific selectors take precedence over less specific selectors.

For example, the selector #header .button is more specific than the selector .button. This is because the first selector contains both an ID selector and a class selector, while the second selector only contains a class selector.

Basic selectors are the foundation of CSS. By understanding how to use them, you can start to style your web pages and make them look more attractive.

Grouping and Combinators in CSS

In the previous part of this series, we learned about basic selectors in CSS. In this part, we’ll take a look at grouping and combinators.

Grouping Selectors

Grouping selectors allow you to select multiple elements at once. There are two ways to group selectors:

1. Using Commas:

You can use commas to separate multiple selectors. For example, the following selector will select all paragraph and heading elements:

p, h1, h2, h3, h4, h5, h6 {
  color: red;
}

2. Using the Descendant Combinator:

The descendant combinator (** **) can be used to select all descendants of a specific element. For example, the following selector will select all span elements that are descendants of div elements:

div span {
  color: blue;
}

combinators

Combinators are used to combine multiple selectors together. There are four types of combinators:

1. The Descendant Combinator:

The descendant combinator (** **) has already been introduced above. It selects all descendants of a specific element.

2. The Child Combinator:

The child combinator (** > **) selects only the direct children of a specific element. For example, the following selector will select all span elements that are direct children of div elements:

div > span {
  color: green;
}

3. The Adjacent Sibling Combinator:

The adjacent sibling combinator (** + **) selects the next sibling of a specific element. For example, the following selector will select all h2 elements that are immediately after h1 elements:

h1 + h2 {
  color: orange;
}

4. The General Sibling Combinator:

The general sibling combinator (** ~ **) selects all siblings of a specific element, regardless of their position. For example, the following selector will select all h2 elements that are siblings of h1 elements:

h1 ~ h2 {
  color: purple;
}

Examples

Here are some more examples of how to use grouping selectors and combinators:

/* Select all paragraph elements that are descendants of `div` elements */
div p {
  color: red;
}

/* Select all `span` elements that are direct children of `div` elements and have the class `button` */
div > span.button {
  color: blue;
}

/* Select all `h2` elements that are immediately after `h1` elements and have the class `title` */
h1 + h2.title {
  color: green;
}

/* Select all `h2` elements that are siblings of `h1` elements and have the class `heading` */
h1 ~ h2.heading {
  color: orange;
}

Grouping selectors and combinators are powerful tools that can help you select elements more precisely. By understanding how to use them, you can write more efficient and effective CSS code.

Pseudo-classes and Pseudo-elements

In the previous part of this series, we learned about grouping and combinators in CSS. In this part, we’ll take a look at pseudo-classes and pseudo-elements.

Pseudo-classes

Pseudo-classes are used to select elements based on their state or position. For example, the pseudo-class :hover can be used to select an element when the user’s mouse is hovering over it.

Here are some commonly used pseudo-classes:

• :hover – Selects an element when the user’s mouse is hovering over it.
• :active – Selects an element when the user is clicking on it.
• :focus – Selects an element when it has focus.
• :visited – Selects a link that has been visited.
• :link – Selects a link that has not been visited.

Pseudo-elements

Pseudo-elements are used to select specific parts of an element. For example, the pseudo-element ::before can be used to insert content before an element.

Here are some commonly used pseudo-elements:

• ::before – Inserts content before an element.
• ::after – Inserts content after an element.
• ::first-letter – Selects the first letter of an element.
• ::first-line – Selects the first line of an element.

Examples

Here are some examples of how to use pseudo-classes and pseudo-elements:

/* Change the color of a button when the user hovers over it */
button:hover {
  color: red;
}

/* Change the background color of a link when the user is clicking on it */
a:active {
  background-color: blue;
}

/* Add a border to an input element when it has focus */
input:focus {
  border: 1px solid black;
}

/* Change the color of a visited link */
a:visited {
  color: purple;
}

/* Change the color of a link that has not been visited */
a:link {
  color: green;
}

/* Insert content before a heading element */
h1::before {
  content: "This is a heading";
}

/* Insert content after a heading element */
h1::after {
  content: "This is the end of the heading";
}

/* Change the style of the first letter of a paragraph element */
p::first-letter {
  font-size: 16px;
  font-weight: bold;
}

/* Change the style of the first line of a paragraph element */
p::first-line {
  text-align: center;
}

Pseudo-classes and pseudo-elements are powerful tools that can help you style your elements more precisely. By understanding how to use them, you can create more attractive and user-friendly web pages.

Universal and Attribute Selectors

In the previous part of this series, we learned about pseudo-classes and pseudo-elements in CSS. In this part, we’ll take a look at universal and attribute selectors.

Universal Selector

The universal selector (*) can be used to select all elements on a page. For example, the following selector will select all elements on a page and change their color to red:

* {
  color: red;
}

Attribute Selectors

Attribute selectors can be used to select elements based on their attributes. For example, the following selector will select all img elements that have the alt attribute:

img[alt] {
  border: 1px solid black;
}

You can also use attribute selectors to select elements based on the value of their attributes. For example, the following selector will select all img elements that have the alt attribute with the value “cat”:

img[alt="cat"] {
  border: 1px solid red;
}

Examples

Here are some more examples of how to use universal and attribute selectors:

/* Select all input elements that have the type `submit` */
input[type="submit"] {
  background-color: blue;
}

/* Select all `a` elements that have the href attribute starting with `https://www.example.com` */
a[href^="https://www.example.com"] {
  color: green;
}

/* Select all `a` elements that have the href attribute ending with `.html` */
a[href$=".html"] {
  color: purple;
}

/* Select all `a` elements that have the href attribute containing the word `example` */
a[href*="example"] {
  color: orange;
}

Universal and attribute selectors are powerful tools that can help you select elements more precisely. By understanding how to use them, you can write more efficient and effective CSS code.