Scribd
Upload
21 views

5 - Selectors

Uploaded by

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

5 - Selectors

Uploaded by

najmafaiz155
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

1 Selectors

Prepared by: Asst.pro Mohammad Edris Naderi


Year: 1402 – autumn
2 Selectors

 A selector in CSS is a pattern or rule used to select specific elements


in an HTML document.
 Selectors determine which elements will be targeted by the CSS
rules.
 CSS selectors can match elements based on their tag name, class,
ID, attributes, or other criteria.
 When a selector matches an element, the associated CSS rules will
be applied to that element.
3 Selectors

 Element Selectors:

 Also known as type selectors.

 Select elements based on their HTML tag name.

 Represented by the tag name itself (e.g., `p`, `div`, `h1`).

 Targets all elements of a specific type.


4 Selectors

 Class Selectors:

 Used to select elements based on their `class` attribute.

 Represented by a dot (`.`) followed by the class name (e.g., `.my-class`).

 Can be applied to multiple elements.

 Multiple elements can share the same class.


5 Selectors

 ID Selectors:

 Used to select elements based on their `id` attribute.

 Represented by a hash (`#`) followed by the ID name (e.g., `#my-id`).

 IDs should be unique within an HTML document.


6 Selectors

 Attribute Selectors:

 Select elements based on their attribute values.

 Can be used to target elements with specific attribute values.

 Attribute selectors use square brackets (`[]`) with different operators and

values.
7 Selectors

 `[attribute]`: Selects elements with a specific attribute.

 `[attribute=value]`: Selects elements with a specific attribute value.

 `[attribute^=value]`: Selects elements with an attribute value that

starts with a specific value.


8 Selectors

 `[attribute$=value]`: Selects elements with an attribute value that

ends with a specific value.

 `[attribute*=value]`: Selects elements with an attribute value that

contains a specific value.


9 Selectors

 Pseudo-classes:

 Used to select elements based on specific states or conditions.

 Represented by a colon (`:`) followed by the pseudo-class name (e.g.,

`:hover`, `:first-child`).

 Pseudo-classes target specific elements that fulfill a certain condition.


10 Selectors

 Common examples:

 `:hover`: Selects elements when the mouse pointer is over them.

 `:first-child`: Selects the first child element of its parent.

 `:last-child`: Selects the last child element of its parent.

 `:nth-child(n)`: Selects the nth child element of its parent.


11 Selectors

 Pseudo-elements:

 Used to style specific parts of an element.

 Represented by a double colon (`::`) followed by the pseudo-element

name (e.g., `::before`, `::after`).

 Pseudo-elements create virtual elements that can be styled independently.


12 Selectors

 Common examples:

 `::before`: Inserts content before the selected element.

 `::after`: Inserts content after the selected element.

 `::first-line`: Selects the first line of text within an element.

 `::first-letter`: Selects the first letter of text within an element.


13 Selectors

 Child Selector:
 Targets elements that are direct children of a specific element. It
uses the greater-than sign (>) to separate the parent and child
elements.
 For example:
 .container > p {
color: red;
}
14 Selectors

 Adjacent Sibling Selector:


 Targets an element that is immediately preceded by another specific
element.
 It uses the plus sign (+) to separate the sibling elements. For
example:
 h2 + p {
margin-top: 10px;
}
15 Summary

 These are just a few examples of the many selectors


available in CSS.
 By understanding and utilizing different selectors, you can
precisely target and style elements on your web page.
16

Questions?

You might also like