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..

    how to add a margin on both sides and center the text in a paragraph?

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to remove right border

    How to make the divs fill the remaining space without using float?

    How to get a gravity effect in a CSS animation?

    How to manage css of big websites within team environment without mess?

    How to shrink the menu when mouse hover on a link using jquery

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to provide a stylesheet for rendering PDFs?

    How to add a mailto to a sentence without extra spacing?

    How is physical inch related to pixels in css given so many different resolutions?

    h1:hover is responding on the whole width, unable to link h1 and don't know how to target things individually

    How do I use pseudo-classes to select all children except first and last?

    Using CSS how to change only the 2nd column of a table

    How to append text after last css class

    How to give different color to draghandle in RangeSlider

    Clickable dropdowns - How do they work?

    How to add js and css files in ASP.net Core?

    CSS show div background image on top of other contained elements [duplicate]

    Optimizing CSS - how to properly reduce CSS footprint [closed]

    How to get the “text-justify:kashida” css property effect on to the arabic text excluding IE browsers

    How to apply styles to a group of Labels in javafx without css

    css menu active sub links to show on parent link

    Tizen - how to change button font-size - fixed

    How to give viewers custom CSS option

    How to end line with a using css

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

    How to use media queries in an effective way? [closed]

    How to get Jsfiddles working on a website? [duplicate]