CSS Selectors - How to apply a defined class on the selector's event

Tags: html,css,events,selector

Problem :

How can I apply a class properties to a class which has selectors in pure CSS? Example:


.two:hover{ /*Apply class ".one" to class ".two" when the event is triggered */}

Solution :

quite simple:

.two {
    color: blue;
.one, .two:hover {
    color: red;

Hope this helps! If you ever did port over to SASS you could do it a little cleaner like:

.one {
    color: blue;
.two {
    color: red;
    &:hover {
        @extend .one;

    CSS Howto..

    How to create a pattern overlay on top of an image

    How do horizontally align text next to an image with CSS

    How to create a pulsing glow ring animation in CSS?

    How to do “display = block” using jquery for particular element

    How to wrap content around an image with CSS?

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    how to make nested flexboxes work

    How to apply same CSS property without overriding and multiple times using jquery?

    How to properly use CSS borders to visualize a value chain?

    Multiple css styles applied to one element, how to force one style over the other

    HTML/CSS - How to make text-overflow in line with each other?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to change content of a div by clicking a button outside the div?

    How to draw a responsive shape [closed]

    CSS, IE7… how to not move down the content

    How to use nested p tags in CSS and Bootstrap boxes?

    How does a document reference an SCSS file?

    How to enable CSS editing in Intellij

    How implement google fonts when download the font in collection?

    How to remove default document style from an element using Javascript

    How to create rounded shapes with css or SVG

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How to I bring my sticky navbar in front of the contents on my page?

    How to float inline elements with css

    how can i get these buttons side by side in the top right corner?

    How to create CSS3 bounce effect

    How do I suppress errors in IntelliJ Idea 12

    how to adjust the background color to the right height

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?