Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 645 of 801
Role of CSS: valid Selector
The CSS :valid selector is used to style form input elements that contain valid values according to their specified type or validation constraints. This pseudo-class selector automatically applies styles when the input meets the validation criteria. Syntax input:valid { /* styles for valid inputs */ } Example: Email Validation Styling The following example demonstrates how to style email inputs with valid email addresses − input[type="email"] { padding: 10px; ...
Read MoreRole of CSS :target Selector
The CSS :target selector is a powerful pseudo-class that targets an element whose id matches the fragment identifier in the current URL. This allows you to style elements when they are directly accessed through anchor links, creating smooth navigation highlighting and interactive content sections. Syntax :target { /* CSS properties */ } How :target Works When a user clicks on a link with a fragment identifier (like #section1), the browser navigates to the element with that id. The :target selector automatically applies styles to that specific element, making it visually ...
Read MoreStyle the document's root element with CSS
The CSS :root pseudo-class selector targets the document's root element. In HTML documents, this is the element. It's commonly used to define CSS custom properties (variables) and global styles. Syntax :root { property: value; } Example 1: Basic Root Element Styling The following example applies background and text color to the root element − :root { background: blue; color: white; ...
Read MoreCSS position: sticky;
The CSS position: sticky property creates a hybrid positioning behavior where an element toggles between relative and fixed positioning depending on the scroll position. The element is positioned relative until it reaches a specified threshold, then becomes fixed in place. Syntax selector { position: sticky; top: value; } How It Works A sticky element behaves like position: relative until the viewport reaches the defined offset position. Once the threshold is met, it becomes position: fixed and sticks to that position while scrolling. Example: Basic Sticky ...
Read MoreRole of CSS :required Selector
The CSS :required pseudo-class selector is used to target form elements that have the required attribute. This selector allows you to apply specific styles to required form fields, helping users identify which fields are mandatory to fill out. Syntax :required { /* CSS properties */ } input:required { /* Styles for required input elements */ } Example: Styling Required Input Fields The following example demonstrates how to style required input fields with a distinctive background color − ...
Read MoreRole of CSS :read-write Selector
The CSS :read-write pseudo-class selector targets form elements that are both readable and writable by the user. This selector applies styles specifically to input fields and textareas that can be edited, excluding read-only elements. Syntax :read-write { /* CSS properties */ } Elements Targeted The :read-write selector matches: elements without the readonly attribute elements without the readonly attribute Elements with contenteditable="true" Example The following example demonstrates how :read-write styles only the editable input field − ...
Read MoreStyle elements with a "readonly" attribute with CSS
The CSS :read-only pseudo-class selector is used to style form elements that have the readonly attribute. This selector targets input fields and textareas that users cannot modify. Syntax input:read-only { /* CSS properties */ } textarea:read-only { /* CSS properties */ } /* Target all read-only elements */ :read-only { /* CSS properties */ } Example: Styling Read-Only Input Fields The following example demonstrates how to apply different styles to read-only and editable input fields − ...
Read MoreRole of CSS : read-only Selector
The CSS :read-only selector is used to select form elements that have the readonly attribute set. This pseudo-class targets input fields and textarea elements that users cannot modify, making it useful for styling non-editable form fields differently from editable ones. Syntax :read-only { /* styles */ } input:read-only { /* styles for read-only input elements */ } textarea:read-only { /* styles for read-only textarea elements */ } Example: Basic Read-Only Styling The following example demonstrates how to style read-only input ...
Read MoreStyle elements with a value outside a specified range with CSS
The CSS :out-of-range pseudo-class selector is used to style elements when their value is outside the specified min and max range. This selector only applies to input elements that have range limitations defined. Syntax input:out-of-range { /* styles */ } Example: Styling Out-of-Range Input The following example demonstrates how to style a number input when the value is outside the specified range − input:out-of-range { border: 3px dashed orange; ...
Read MoreRole of CSS :optional Selector
The CSS :optional pseudo-class selector is used to target form elements that do not have the required attribute. This selector is particularly useful for styling optional form fields differently from required ones. Syntax :optional { /* CSS properties */ } /* Target specific optional elements */ input:optional { /* CSS properties */ } Example: Styling Optional Form Fields The following example demonstrates how to style optional input fields with a light blue background while required fields remain with default styling − ...
Read More