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
CSS Articles
Page 107 of 130
Role 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 MoreCSS position: fixed;
The CSS position: fixed; property positions an element relative to the viewport, which means it stays in the same place even when the page is scrolled. Fixed elements are removed from the normal document flow and positioned using the top, right, bottom, and left properties. Syntax selector { position: fixed; top: value; right: value; bottom: value; left: value; } Possible Values PropertyValueDescription positionfixedSets the positioning method to fixed toplength | %Distance from the ...
Read MoreRole of CSS :checked Selector
The CSS :checked pseudo-class selector targets and styles input elements of type checkbox or radio button that are currently checked or selected. This selector allows you to apply specific styles to form controls based on their state. Syntax input:checked { /* CSS properties */ } Example 1: Styling Checked Checkboxes The following example demonstrates how to style checked checkboxes with enhanced size and background color − input[type="checkbox"]:checked { width: 25px; ...
Read MoreStyle the active link with CSS
To style the active links, use the CSS :active selector. The :active pseudo-class targets an element during the exact moment it is being clicked or activated by the user. Syntax selector:active { property: value; } Example: Basic Active Link Styling The following example changes the background color of a link when it's being clicked − a { color: blue; text-decoration: none; ...
Read MoreUsage of CSS :focus pseudo-class
The CSS :focus pseudo-class is used to apply styles to form elements when they receive focus (when a user clicks on them or navigates to them using the keyboard). This is particularly useful for improving user experience and accessibility. Syntax selector:focus { property: value; } Example The following example demonstrates how to use the :focus pseudo-class to highlight input fields with an orange background when they are focused − input:focus { ...
Read MoreWhat is a CSS Selector?
CSS selectors are patterns used to select and style HTML elements. They act as a bridge between your HTML structure and CSS styles, allowing you to target specific elements or groups of elements on your webpage. Syntax selector { property: value; } Types of CSS Selectors Selector Type Syntax Description Element Selector p Selects all elements of a specific type Class Selector .demo Selects all elements with class="demo" ID Selector #myid Selects the element with id="myid" Universal Selector * Selects ...
Read MoreCSS Descendant Selector
The descendant selector in CSS is used to match all elements that are descendants of a specified element. It allows you to apply styles to nested elements without affecting elements outside the parent container. Syntax ancestor descendant { property: value; } The descendant selector uses a space between the ancestor and descendant elements. It selects all descendant elements, regardless of how deeply nested they are within the ancestor. Example You can try to run the following code to implement CSS Descendant Selector − ...
Read More