Scribd
Upload
4 views2 pages

Descendant Selector

The document explains CSS selectors, specifically the descendant selector and child selector, with examples demonstrating their usage. It also covers pseudo-classes and pseudo-elements, detailing their syntax and functions, such as styling specific parts of an element. Key pseudo-elements like ::first-line, ::first-letter, ::before, ::after, and ::selection are highlighted for their specific applications.

Uploaded by

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

Descendant Selector

The document explains CSS selectors, specifically the descendant selector and child selector, with examples demonstrating their usage. It also covers pseudo-classes and pseudo-elements, detailing their syntax and functions, such as styling specific parts of an element. Key pseudo-elements like ::first-line, ::first-letter, ::before, ::after, and ::selection are highlighted for their specific applications.

Uploaded by

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

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

div p {
background-color: yellow;
}

Child Selector (>)

The child selector selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a <div> element:

div > p {
background-color: yellow;
}

example –
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>

Pseudo-classes

A pseudo-class is used to define a special state of an element.

Syntax –
selector:pseudo-class {
property: value;
}
Pseudo-Elements
A CSS pseudo-element is used to style specified parts of an element.
Syntax –
selector::pseudo-element {
property: value;
}

::first-line - pseudo-element is used to add a special style to the first line of a text.

::first-letter pseudo-element is used to add a special style to the first letter of a text.

::before pseudo-element can be used to insert some content before the content of an element.

::after pseudo-element can be used to insert some content after the content of an element.

::selection pseudo-element matches the portion of an element that is selected by a user.


Example –
::selection: color, background

You might also like