How to select two elements with “> span” in CSS?


Tags: html,css,css-selectors

Problem :

In my html code, I have the following two div elements:

<div id="graph-sliders">
...
</div>

<div id="image-sliders">
...
</div>

And in my corresponding css code, I have the follwing (working) code to style "graph-sliders":

#graph-sliders > span {
    ...
}

However, what I am trying to do is have that css block style both graph-sliders and image-sliders. I have tried writing #graph-slider #image-sliders > span { but it messes up the formatting when I view the webpage.

What is the correct way to style both image-sliders and graph-sliders with the > span?



Solution :

Try the following:

#graph-sliders > span, #image-sliders > span {
  ...
}

    CSS Howto..

    Show a box on top of an image in an HTML page

    How to Horizontally Scroll Images In Single Line

    how to DRY up (remove redundancy) from this css class selector declaration?

    How do I learn what changes my css values?

    How do I set the height of a parent to auto minus pixels?

    How do I add two buttons side by side that are made up of an image?

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How to have an image incorporate in my text ? HTML CSS

    How to avoid this hardcoded index.js when use webpack?

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to put only certain elements of a div in a css box

    How to align image and text for my html/css

    How to vertical align icon inside label and button in the same way

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to use a CSS animation within a JavaScript plugin?

    CSS How to apply child:hover but not parent:hover

    How to implement a navbar with HTML / CSS

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    CSS How to attach input box to bottom of divider window

    How to let the browser cache css and js files for a https site?

    How to change the value depend on css animation?

    how to bring two blocks closer

    Bootstrap 3 / CSS: How to properly vertically align in panel heading

    How to wrap an div with another div - jQuery Wrap

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    how do I float a div over a background image in a different div

    CSS table: How to position action buttons left to each row

    How to fix unable to load css file in maven build on maven springmvc project [closed]