How To Select Two classes with CSS?


Tags: html,css

Problem :

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;;
}


Solution :

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>


    CSS Howto..

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    How to center content vertically with unknown content and fixed layout

    How to debug web page rendering compatibility issues across browsers?

    How can I get the first and last name labels to align under the corresponding input forms?

    How to vertically align an image in a container that fills the page?

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    How do you deal with Internet Explorer?

    How to navigate from one field to another field using Enter Key function in MVC5

    How to parameterize CSS selectors? [duplicate]

    How to style Bootstrap menu like a V? [closed]

    How to Highlight the Menu in css. I used a:active but it does not serve the purpose I expected

    How can I make the width of my
    match the width of the inside its
    tag?

    How to word wrap text in HTML?

    how to always display empty tags, is there a css property for this?

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How to use Vendor Properties in Multiple Backgrounds?

    How to give the a specific background color in CSS?

    In Firebug, how to tell what is overriding a style?

    How to make an arrow pointing down after a section in HTML/CSS

    How to make an inline element appear on new line, or block element not occupy the whole line?

    jQuery slideDown() moves everything below downwards. How to prevent this?

    How to stop CSS element style from getting into my class style?

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    How to change css using jquery in a php loop

    How to uniformly darken colors?

    SF2 how to import css / js?

    How to fade loop background images?

    How to force IE to place two div boxes next to each other in it's browser window?

    how to blur all list-items text except for (this) a:hover