Adjacent Selector (+)

The adjacent selector in CSS, denoted by X + Y, selects the element (Y) that is immediately preceded by the former element (X). For example, applying div + p affects the p tag that comes right after a closing div tag.

Child Selector (>)

Using X > Y in CSS means that Y is the immediate child of X. This selector targets elements that are direct children of a specific parent element.

General Sibling Selector (~)

The general sibling selector, represented by X ~ Y, is similar to the adjacent selector but less strict. For instance, div ~ p applies styles to the p tag that comes after a closing div tag at the same level.

Attribute Selectors

• X[href="foo"]: Targets elements where the href attribute is exactly “foo”.
• X[href*="foo"]: Selects elements where the href attribute contains the substring “foo”.
• X[href^="foo"]: Matches elements with an attribute that starts with “foo”.
• X[href$="foo"]: Matches elements with an attribute that ends with “foo”.
• X[data-*="foo"]: Selects elements with an attribute that starts with “data-” and has the value “foo”. For example, X[data-xyz="foo"] will target all elements with data-xyz="foo".
• X[data~*="foo"]: Targets elements with an attribute that contains a space-separated list of values, where one of the values is “foo”. For instance, X[data~xyz="foo"] applies to elements with data-xyz="eoo goo foo".

Understanding CSS Display Property

The display: none property in CSS is used to hide an element completely from the layout. This means the element will not be visible and will not take up any space on the page. On the other hand, the visibility: hidden property hides the element without affecting the layout. The element is not visible, but space is reserved for it in the layout.

Block Elements in CSS

In CSS, block elements are those that start on a new line and take up the full width available. They create a line break before and after themselves, affecting the layout of the page. Examples of block elements include <div>, <p>, and <h1> to <h6>.

Pseudo Classes and Elements in CSS

• Pseudo-classes in CSS are used to define special states of an element. They are written with the syntax selector:pseudo-class { property: value; }. Examples of pseudo-classes include :link, :visited, :active, and :hover.
• Pseudo-elements in CSS allow styling specific parts of an element. They are written with the syntax selector:pseudo-element { property: value; }. Examples of pseudo-elements include ::first-letter, ::first-line, ::before, and ::after.

Understanding Selector Precedence in CSS

In CSS, when multiple selectors target the same element, the selector with the highest specificity will take precedence in styling that element. Specificity in CSS is calculated based on the type of selector used. For example, ID selectors have a specificity of 100, class selectors have a specificity of 10, and HTML selectors have a specificity of 1.

Introduction to @ At-Rules in CSS

@-rules in CSS are special instructions or directives for the CSS parser. Some common @-rules include:

• @charset: This rule defines the character encoding of an external style sheet and must be the first rule in the file.
• @import: The @import rule allows importing one style sheet into another. It is important to note that all @import rules must come before any other rules in the file.