Scribd
Upload
3 views

Advanced Css

The document provides advanced CSS tips focusing on various selectors, including :not(), :nth-child(), :nth-of-type(), :first-of-type, :last-of-type, :enabled, :disabled, :checked, :focus-within, ::selection, :has(), and :root. Each selector is described with its function, an example, and a hint for practical use. These tips aim to enhance styling capabilities and improve the efficiency of CSS coding.

Uploaded by

kaushikwhatmaction
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Advanced Css

The document provides advanced CSS tips focusing on various selectors, including :not(), :nth-child(), :nth-of-type(), :first-of-type, :last-of-type, :enabled, :disabled, :checked, :focus-within, ::selection, :has(), and :root. Each selector is described with its function, an example, and a hint for practical use. These tips aim to enhance styling capabilities and improve the efficiency of CSS coding.

Uploaded by

kaushikwhatmaction
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS tips

Advanced

C S S
Selectors
SELECTOR

HTML ELEMENTS CSS RULES

Page 1
CSS tips

1. :not( )
Description: Excludes elements that match a given selector.

Example:

<body>
<p class=”primary”> Welcome to My Website</p>
<p> This is a basic HTML document.</p>
</body>

Hint: Selects all <p> elements except those with the


primary class.

Page 2
CSS tips

2. :nth-child()
Description: Selects elements based on their position within a parent.

Example:

<body>
<p> Welcome to My Website</p>
<p> This is a basic HTML document.</p>
<p> This is a basic HTML document.</p>
</body>

Hint: Selects the second <p> element in the list.

Page 3
CSS tips

3. :nth-of-type()
Description: Selects elements of a specific type based on their
position among siblings.

Example:

<body>
<p> Welcome to My Website</p>
<h2> This is a basic HTML document.</2>
<p> This is a basic HTML document.</p>
</body>

Hint: Targets the second <p> element, ignoring other


types of siblings.

Page 4
CSS tips

4. :first-of-type, :last-of-type
Description: Selects the first or last element of a specific type among
siblings.

Example:

<body>
<p> Welcome to My Website</p>
<h2> This is a basic HTML document.</2>
<p> This is a basic HTML document.</p>
</body>

Hint: :first-of-type selects the first <p>, and :last-of-


type selects the last <p>.

Page 5
CSS tips

5. :enabled, :disabled
Description: Selects form elements that are enabled or disabled.

Example:

<body>
<input type="text" />
<input type="text" disabled />
</body>

Hint: Styles enabled and disabled input fields


differently.

Page 6
CSS tips

6. :checked
Description: Selects elements that are checked (like radio buttons
or checkboxes).

Example:

<body>
<input type="checkbox" checked/>
<label>I agree</label>
</body>

Hint: Targets checkboxes or radio buttons that are


selected.

Page 7
CSS tips

7. :focus-within
Description: Targets an element when any of its descendants are
focused.

Example:

<div>
<input type="text" />
<label>First Name :</label>
</div>

Hint: Useful for styling parent containers of focused


input fields.

Page 8
CSS tips

8. ::selection
Description: Styles the portion of an element selected by the user.

Example:

<body>
<p> Welcome to My Website</p>
<p> This is a basic HTML document.</p>
</body>

Hint: Apply custom styles to text when it’s highlighted


by the user.

Page 9
CSS tips

9. :has()
Description: Selects elements that contain other elements
matching a selector (browser support may vary).

Example:

<body>
<div>
<p>Nested paragraph</p>
</div>
<div>No paragraph here</div>
</body>

Hint: Targets <div> elements that contain a <p>.

Page 10
CSS tips

10. :root
Description: Selects the root element of the document (usually
<html>). Commonly used to define global CSS variables.

Example:

Rendered Output:
The <p> text will appear in blue (#2ecc71)

Hint:
Use :root to define variables (--variable-
name) that act as global values, ensuring
consistency and easy maintenance across
your CSS.
You can access these variables anywhere
using the var() function.

Page 11
CSS tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Page 12

You might also like