How To Select Two classes with CSS?

Question

I'm trying to figure out, how I can select two classes so that when I hover on one of the classes, it does the animation I want. This is what I have tried:

.news1 {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;

}
.news1:hover .news1msg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}
.news1msg {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;;
}

Answer 1

If you want to apply same css to multiple classes or selectors you can use comma.

.class1,
.class2{
     /* some styles */
}

Answer 2

.news1:hover, .news1msg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Answer 3

Use , to separate selectors:

.news1:hover,
.news1msg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Just make sore you place :hover effect after .news1msg { or it will not take effect

---

If you need to hover on parent and apply blur on child element:

 .news1:hover .news1msg {
    -webkit-filter: blur(0);
    filter: blur(0);
 }

You can't apply CSS to parent element if hovering on child

Answer 4

This selector can match all classes begins with 'news' eg. news1, news1msg

[class^="news"] {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Edit: In the snippset I suppose you have what you need with your blur.

 .news1 { background-color:#33aaff; width:100px; height:100px; text-align:center; -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;; } .news1:hover { -webkit-filter: blur(0); filter: blur(0); } .news1msg { color:white; font-size:25px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;; } 

 <p class="news1"> <span class="news1msg">some text</span> </p>