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 647 of 801
Role of CSS:lang Selector
The CSS :lang selector allows you to apply specific styles to elements based on their language attribute. This pseudo-class selector targets elements that have a specific lang attribute value, making it useful for multilingual websites where different languages may need different styling. Syntax :lang(language-code) { /* CSS properties */ } Example: Styling French Text The following example applies a green background to all paragraph elements with French language attribute − p:lang(fr) { ...
Read MoreStyle all elements with an invalid value with CSS
To style all elements with an invalid value, use the CSS :invalid pseudo-class selector. This selector targets form elements that contain invalid data based on their type, pattern, or required attributes. Syntax selector:invalid { property: value; } How It Works The :invalid pseudo-class automatically applies styles to form elements when their values don't meet validation criteria. This includes invalid email formats, numbers outside specified ranges, or empty required fields. Example: Invalid Email Input The following example styles an email input with a red background when the email format ...
Read MoreRole of CSS :invalid Selector
The CSS :invalid pseudo-class selector targets form elements that fail validation constraints. It automatically applies styles to input fields when their values don't meet the specified requirements, providing immediate visual feedback to users. Syntax selector:invalid { property: value; } Example: Email Validation Styling The following example applies a red background to an email input when the value is invalid − input:invalid { background-color: #ffcccc; ...
Read MoreStyle links on mouse over with CSS
To style links on mouse over with CSS, use the :hover pseudo-selector. This selector allows you to apply styles when a user hovers their mouse cursor over an element. Syntax a:hover { property: value; } Example: Basic Link Hover Effect The following example changes the background color of a link when you hover over it − a { text-decoration: none; padding: 10px 15px; ...
Read MoreRole of CSS :first-of-type Selector
The CSS :first-of-type pseudo-class selector targets the first element of its type among siblings within the same parent container. It's particularly useful for styling the first occurrence of specific HTML elements without adding extra classes. Syntax element:first-of-type { property: value; } Example: First Paragraph Styling The following example demonstrates how to style the first paragraph element within its parent − p:first-of-type { background-color: orange; ...
Read MoreRole of CSS: first-child Selector
The CSS :first-child selector targets the first child element of its parent, regardless of element type. It's commonly used to apply special styling to the first item in a list or the first paragraph in a container. Syntax selector:first-child { property: value; } Example: Basic Usage The following example styles every element that is the first child of its parent − p:first-child { background-color: orange; ...
Read MoreRole of CSS :enabled Selector
The CSS :enabled selector is a pseudo-class used to style form elements that are enabled and can be interacted with by users. This selector targets input fields, buttons, and other form controls that are not disabled. Syntax :enabled { /* CSS properties */ } /* Or target specific elements */ input:enabled { /* CSS properties */ } Example: Styling Enabled Input Fields The following example demonstrates how to style enabled input fields with a blue background while disabled fields remain unaffected − ...
Read MoreTransform the element by using 16 values of matrix with CSS3
The CSS matrix3d() function is used to transform HTML elements in 3D space using a 4x4 transformation matrix with 16 values. This powerful function allows you to perform complex 3D transformations including rotation, scaling, skewing, and translation all in one declaration. Syntax transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4); Parameters ValuesDescription a1, b1, c1, d1First row of the 4x4 matrix − controls X-axis scaling and rotation a2, b2, c2, d2Second row of the 4x4 matrix − controls Y-axis scaling and rotation a3, b3, ...
Read MoreRole of CSS :empty Selector
The CSS :empty selector targets elements that contain no children. An element is considered empty if it has no child elements, no text content, and no whitespace. This pseudo-class is useful for styling placeholder elements or removing unwanted margins from empty containers. Syntax selector:empty { /* CSS properties */ } What Counts as Empty An element is considered empty if it contains: No child elements No text content No whitespace (spaces, tabs, line breaks) Example: Styling Empty Paragraphs The following example demonstrates how to apply different ...
Read MoreRole of CSS: disabled Selector
The CSS :disabled selector is used to style form elements that have the disabled attribute. This pseudo-class selector targets input fields, buttons, and other form controls that are disabled and cannot be interacted with by users. Syntax :disabled { /* CSS properties */ } element:disabled { /* CSS properties */ } Example The following example demonstrates how to style enabled and disabled input fields with different background colors − ...
Read More