Selectors, Properties, and Values

Selectors are the means by which CSS identifies which HTML elements to style. Here are some basic types of selectors:

• Tag selectors: Selects HTML elements based on the element name.
• ID selectors: Selects a specific element based on its unique ID.
• Class selectors: Selects elements based on their class attribute.
• Attribute selectors: Selects elements based on an attribute or attribute value.
• Pseudo-class selectors: Selects elements based on a certain state.
• Pseudo-elements selectors: Select elements based on their position in the document.

Here's how you can use the different types of selectors in CSS:

Tag Selector

The tag selector targets elements based on their tag name. 

p {
  color: red;
}

In this example, every <p> element on the webpage will have its text color set to red. Tag selectors are a straightforward way to style all elements of a particular type and are fundamental to CSS.

Class Selector

The class selector targets elements based on their class attribute.

.my-class {
  font-size: 20px;
}

In this example, any HTML element with class="my-class" will have a font size of 20 pixels. Class selectors are highly versatile as they can be used on any HTML element and multiple elements can share the same class.

ID Selector

The ID selector targets an element based on its id attribute. It's a highly specific selector since IDs must be unique within a page.

#myID {
  background-color: yellow;
}

This selector applies a yellow background to the element with id="myID". It's ideal for styling elements that have a unique presence on the webpage.

Attribute selector

Attribute selectors target elements based on a given attribute and its value. 

[type="text"] {
    border: 1px solid green;
}

This selector applies to any element with a type="text" attribute (commonly used in <input> elements), giving them a 1-pixel solid green border. It's a powerful selector for styling elements based on their attributes rather than their type or class.

Grouping Selectors

Grouping selectors allows you to apply the same styles to multiple selectors.

h1, h2, h3 {
 font-family: Arial, sans-serif;
}

Grouping selectors is an efficient method to apply the same set of styles to multiple selectors. Here, h1, h2, and h3 headings will all inherit the Arial font-family. This reduces redundancy in your CSS, making your stylesheet more concise and easier to maintain.

Universal Selector

The universal selector (*) targets all elements on a webpage. It's often used in CSS resets.

* {
  margin: 0;
  padding: 0;
}

In this example, the universal selector removes default margins and padding from all elements. This helps in creating a consistent starting point for styling across different browsers.

Once you've selected an element, you can apply styles to it using properties and values as you’ve already seen. Properties are what you want to style (such as color, font-size, margin), and values are the styles that you apply to those properties. For example, color: blue; will apply the color blue to the selected element.

Example of CSS Properties and Values:

p {
  color: crimson;
}

In this example, we are selecting all <p> elements and changing their text color to crimson.

In CSS, combinators are used to explain the relationship between two selectors. There are four different combinators in CSS:

• descendant selector (space): Selects all elements that are descendants of a specified element.
• child selector (>): Selects all elements that are direct children of a specified element.
• adjacent sibling selector (+): Selects all elements that are the adjacent siblings of a specified element.
• general sibling selector (~): Selects all elements that are siblings of a specified element.

div p {
  background-color: yellow;
}

div > p {
  background-color: blue;
}

div + p {
  background-color: red;
}

div ~ p {
  background-color: green;
}

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 

For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

p:hover {
    color: blue;
}

In this example, the :hover pseudo-class changes the color of all <p> elements to blue when the mouse pointer hovers over them. It's widely used for adding interactive states like hover, active, focus, etc., to elements.

The :not() pseudo-class represents elements that do not match a list of selectors.

div:not(.class) {
 color: purple;
}

This selects all <div> elements that do not have the class .class.

Pseudo-elements essentially allow you to style specific parts of an element. For instance, you can target the first line or first letter of a paragraph, or even create new elements within the DOM purely with CSS. The most commonly used pseudo-elements are :before and :after, which enable you to insert content before or after the content of an element, respectively.

Before pseudo selector

The :before pseudo-element is used to insert content before the content of the selected element.

p:before {
 content: "Note: ";
 font-weight: bold;
}

 In this example, the text "Note: " is inserted before the content of every <p> element. 

The content property is mandatory for the :before selector to work. It's often used to add decorative content, like icons or opening quotes, to an element. The inserted content is treated as part of the element for styling purposes but does not exist in the HTML document.

After pseudo selector

Similarly, the :after pseudo-element inserts content after the content of the selected element. 

p:after {
 content: " Read more.";
 font-style: italic;
}

This example adds " Read more." after the content of each <p> element. Like :before, it requires the content property to function and is commonly used for adding content or decorations at the end of an element.

Styling with :before and :after

Both :before and :after are incredibly useful for adding extra elements for styling without cluttering the HTML. They can be styled almost like any other element, including properties for size, color, position, and more. For instance, they are frequently used to create custom bullet points, borders, or background decorations.

Use Cases and Limitations

• Decorative Elements: Create shapes or add icons without additional HTML markup.
• Clearfix Hack: Often used in a clearfix hack to clear floats without extra markup.
• Content Generation: Automatically add content like counters in ordered lists.
• Accessibility: Note that content added via ::before and ::after is not accessible to screen readers, so it should not be used for conveying essential information.

Using :before and :after effectively can greatly enhance the design capabilities and visual appeal of your web pages while keeping the HTML clean and semantic.

 First-Child Selector

The :first-child pseudo-class targets the first child element of its parent. It's useful for styling the first element differently from others.

ul li:first-child {
 color: red;
}

In this example, the first <li> element in each <ul> will be colored red.

Last-Child Selector

The :last-child pseudo-class targets the last child element of its parent. It allows you to apply specific styles to the last element.

ul li:last-child {
 color: green;
}

Here, the last <li> element in every <ul> will be colored green.

Nth-Child Selector

The :nth-child(n) pseudo-class matches elements based on their position in a group of siblings. The n can be a number, a keyword, or a formula.

Using a number:

ul li:nth-child(2) {
 color: blue;
}

This styles the second <li> in every <ul> with blue color.

Using a formula:

ul li:nth-child(odd) {
 color: orange;
}

This selects and styles every odd <li> in a <ul> with orange color.

Using a formula (an+b):

ul li:nth-child(3n+1) {
 color: purple;
}

Here, every third <li> element, starting from the first, will be purple. So it targets the 1st, 4th, 7th, and so on.

You can also combine these selectors with other selectors to get more specific:

div > p:first-child {
 font-weight: bold;
}

This will make the first <p> element that is a direct child of a <div> bold.

p::first-letter {
  font-size: 130%;
}

This increases the font size of the first letter of each paragraph.

Each of these selectors plays a crucial role in CSS, allowing developers to precisely target and style HTML elements to create visually appealing and functional web pages.