Scribd
Upload
3 views2 pages

Document CSS

The document outlines five types of CSS selectors: Simple Selectors, Combinator Selectors, Pseudo-Class Selectors, Pseudo-Element Selectors, and Attribute Selectors. Each type is explained with examples, detailing how they select HTML elements based on various criteria such as name, id, class, relationships, state, specific parts, and attributes. This serves as a comprehensive guide for understanding and utilizing CSS selectors effectively.

Uploaded by

alioushougaba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views2 pages

Document CSS

The document outlines five types of CSS selectors: Simple Selectors, Combinator Selectors, Pseudo-Class Selectors, Pseudo-Element Selectors, and Attribute Selectors. Each type is explained with examples, detailing how they select HTML elements based on various criteria such as name, id, class, relationships, state, specific parts, and attributes. This serves as a comprehensive guide for understanding and utilizing CSS selectors effectively.

Uploaded by

alioushougaba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

1.

Simple Selectors

2. Combinator Selectors

3. Pseudo-Class Selectors

4. Pseudo-Element Selectors

5. Attribute Selectors

Explanation of the five types of CSS selectors you listed:

1. Simple Selectors

These select HTML elements directly based on name, id, or class:

 Element Selector: p selects all <p> tags.


 ID Selector: #header selects the element with id="header".
 Class Selector: .menu selects all elements with class="menu".
 Universal Selector: * selects all elements.
 Group Selector: h1, h2, p selects all <h1>, <h2>, and <p> elements.

2. Combinator Selectors

These define relationships between selectors:

 Descendant Selector: div p selects all <p> inside a <div>.


 Child Selector: div > p selects <p> elements that are direct children
of <div>.
 Adjacent Sibling Selector: h1 + p selects the first <p> immediately
following an <h1>.
 General Sibling Selector: h1 ~ p selects all <p> elements that are
siblings of an <h1>.

3. Pseudo-Class Selectors

These select elements based on their state or position:

 :hover targets an element when hovered by the mouse.


 :nth-child(2) selects the second child of its parent.
 :first-child selects the first child of its parent.
 :focus applies styles when an element is focused (e.g., an input).

4. Pseudo-Element Selectors

These target specific parts of elements:

 ::before inserts content before an element’s content.


 ::after inserts content after an element’s content.
 ::first-letter targets the first letter of text.
 ::first-line targets the first line of text.

5. Attribute Selectors

These select elements based on the presence or value of attributes:

 [type] selects elements with a type attribute.


 [type="text"] selects elements with type="text".
 [href^="https"] selects elements where the href starts with "https".
 [data-role~="button"] selects elements where the data-role attribute
contains the word "button".

You might also like