What are pseudo-classes in CSS?

In CSS, pseudo-classes are used to define a state of an element based on its position, relationship with other elements, or user interaction. 

They are denoted by a colon (:) followed by the pseudo-class name.


Examples of pseudo-classes:


1. :hover - applied when an element is hovered over by a user

2. :active - applied when an element is being clicked or activated

3. :focus - applied when an element receives focus (e.g., when a user clicks on a form input)

4. :visited - applied to links that have been visited by the user

5. :first-child - applied to the first child element of a parent element

6. :last-child - applied to the last child element of a parent element

7. :nth-child(n) - applied to the nth child element of a parent element

8. :disabled - applied to elements that are disabled

9. :enabled - applied to elements that are enabled

10. :checked - applied to checkboxes and radio buttons that are checked


Pseudo-classes allow you to apply styles to elements based on their state or position, without needing to add additional classes or attributes to the HTML.


Side note: In programming languages, pseudo-classes can also refer to a mechanism to simulate the existence of classes or inheritance in languages that do not support these features.

Comments

Post a Comment

Write something to CodeWithAbdur!

Popular posts from this blog

Loading Windows in CLI mode

You can load Windows with only the Command Line Interface (CLI) and no Graphical User Interface (GUI). This mode is helpful for troubleshooting or running scripts in a lightweight environment. Here’s how you can do it: Method 1: Use Safe Mode with Command Prompt Access Safe Mode with Command Prompt : On Windows 10/11 : Open Settings → Update & Security → Recovery . Under "Advanced startup," click Restart now . Go to Troubleshoot → Advanced options → Startup Settings → Restart . After the system restarts, press 6 or F6 to start in Safe Mode with Command Prompt . On older versions like Windows 7 : Restart your computer and press F8 repeatedly before Windows boots. Select Safe Mode with Command Prompt from the menu. The system will boot into a CLI-only environment with no GUI components. Method 2: Modify Boot Options Use MSCONFIG : Open Run ( Windows + R ), type msconfig , and press Enter . Go to the Boot tab. Check the box for Safe ...
Read more

XHR/fetch Breakpoints Explained

XHR/fetch breakpoints are a type of breakpoint available in modern browser developer tools like Chrome DevTools, Firefox Developer Tools, and Microsoft Edge DevTools. They allow you to pause code execution specifically when an XHR (XMLHttpRequest) or Fetch API request occurs . This is incredibly useful for debugging and analyzing network traffic related to your web application. Here's what you need to know about XHR/fetch breakpoints: Triggering Conditions: These breakpoints trigger based on the URL of the request . You can specify a full URL, part of the URL (e.g., using wildcards), or even regular expressions to match specific patterns. Some tools might also offer options to break on specific HTTP methods (GET, POST, etc.) or request types (main request, sub-requests). Benefits: Pinpointing network issues: Use them to identify slow or failed requests, analyze response data, and debug API calls. Understanding request flow: See the order and timing of multiple requests made by yo...
Read more

Using insertAdjacentHTML instead of innerHTML to avoid XSS attacks

Using insertAdjacentHTML is a great way to dynamically insert HTML while being more cautious about XSS vulnerabilities. Here’s how you can create and insert the table using insertAdjacentHTML : HTML Setup First, ensure you have an empty container in your HTML where the table will be inserted: <div id="table-container"></div> JavaScript to Insert the Table const tableHTML = ` <table border="1"> <tr> <th>Static Properties</th> <th>Instance Properties</th> </tr> <tr> <td>Defined on the class itself</td> <td>Defined on each instance of the class</td> </tr> <tr> <td>Accessed using <code>ClassName.propertyName</code></td> <td>Accessed using <code>instance.propertyName</code></td> </tr> <tr> <td>Shared across all instances</td> ...
Read more