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
Articles by Chandu yadav
Page 24 of 81
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 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: 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 Child Selector
The CSS child selector (>) is used to select all elements that are direct children of a specified element. It only targets immediate children and does not select nested elements deeper in the hierarchy. Syntax parent > child { property: value; } Example The following example demonstrates how the child selector works − div > p { background-color: orange; padding: 10px; ...
Read MoreCSS overflow-x
The CSS overflow-x property controls how content is handled when it overflows the horizontal boundaries of an element. It determines whether to show scrollbars, hide overflow content, or make it visible beyond the container's edges. Syntax selector { overflow-x: value; } Possible Values ValueDescription visibleContent overflows the container and remains visible (default) hiddenOverflow content is clipped and hidden scrollA scrollbar is always shown, even if content doesn't overflow autoScrollbar appears only when content overflows Example: Hidden Horizontal Overflow The following example demonstrates hiding horizontal overflow content ...
Read MoreCSS position: relative;
The CSS position: relative property allows you to position an element relative to its normal position in the document flow. The element maintains its original space in the layout, but you can offset it using the top, right, bottom, and left properties. Syntax selector { position: relative; top: value; right: value; bottom: value; left: value; } Key Characteristics When an element has position: relative − It remains in the normal document flow Other ...
Read MoreSet the color of the four borders using CSS
The CSS border-color property is used to set the color of the four borders of an element. You can specify different colors for each border or apply a single color to all borders. Syntax selector { border-color: value; } Possible Values ValueDescription color-nameSpecifies a color by name (e.g., red, blue) hex-valueSpecifies a color using hexadecimal notation (e.g., #FF0000) rgb-valueSpecifies a color using RGB values transparentSets the border color to transparent Example: Four Different Border Colors The following example sets different colors for each of the four ...
Read MoreStyle elements with a value within a specified range with CSS
To style elements with a value within a specified range, use the CSS :in-range pseudo-class selector. This selector applies styles only when the input's value falls within the defined min and max attributes. Syntax input:in-range { property: value; } Example: Basic In-Range Styling The following example demonstrates styling a number input when its value is within the specified range − input:in-range { border: 3px dashed orange; ...
Read MoreRole of CSS :focus Selector
The CSS :focus pseudo-class selector is used to target and style an element when it receives focus through user interaction, such as clicking on an input field or navigating to it using the Tab key. Syntax selector:focus { property: value; } Example: Styling Input Fields on Focus The following example changes the background color of input fields when they receive focus − input:focus { background-color: lightblue; ...
Read MoreTransform the element along with x-axis and y-axis with CSS
The CSS translate() function is used to move an element from its current position along the x-axis and y-axis. This transformation does not affect the document flow, meaning other elements remain in their original positions. Syntax transform: translate(x, y); Where: x − a length value representing the horizontal displacement y − a length value representing the vertical displacement (optional, defaults to 0) Example: Moving Element Along Both Axes The following example demonstrates how to translate an element 30px to the right and 20px down − ...
Read More