Tag Archives: CSS-Selectors

The :before and :after pseudo-elements allow one to add styling to the webpage without adding unnecessary markup. SVG content can be added using these pseudo-elements… Read More
The :focus-within pseudo-class is a selects an element that consists of a focused element as a child. The CSS rules are applied when any child… Read More
The CSS :placeholder-shown pseudo-class selects the input element or textarea element that is having placeholder text. The main difference between :placeholder-shown and ::placeholder is that… Read More
The :any-link selector is used to style every <a>, <area>, or <link> element that has an “href” attribute .It will skip applying CSS properties for… Read More
A scope element forms a context for a block of styles. That element provides a reference point for selectors to be matched against. A scope… Read More
:dir is used to select and change the properties of the text element having direction left to right or right to left. Syntax: :dir(ltr|rtl) Parameters:… Read More
The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it… Read More
Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it… Read More
The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That’s… Read More
The shock wave effect is also known as the explosion effect. It is one of the simple CSS effects. For a beginner, it is one… Read More
The CSS border animation using hover is used to create border animation when we hover over a text. The concepts that we are going to… Read More
The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of… Read More
The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection… Read More
The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML… Read More
In CSS, the symbol tilde(~) is know as Subsequent-sibling Combinator (also known as tilde or squiggle or twiddle or general-sibling selector). As the name suggests… Read More