在几个子元素中选择一个ID

Question

I'm currently using Wordpress with a theme.

I'm trying to edit the mobile view of the logo, however when you start to scroll down the page the navigation bar reduces even more in size and I'm having trouble making additional changes when it's in that state.

<header id="site-header" class="" role="banner">
        <div id="header-wrapper">
            <div id="header-container" class="clearfix">
                <div id="site-logo">

When the navigation bar drops to a smaller size the first line becomes

<header id="site-header" class="header-sticked" role="banner">

Is it possible to modify site-header only when 'header-sticked' is present? I know I could edit the theme to add a class to site-logo but I'm interested to see if this is possible with only CSS.

For example (psuedo) something like

.header-sticked#header-wrapper#header-container#site-logo {
//blah
}

Answer 1

I'm pretty sure you're looking for

#site-header.header-sticked #site-logo {
  // blah
}

You're therefore styling the logo only when it's nested inside the site header with the class .header-sticked

Answer 2

Your question isn't too clear, but if you want to address an element that has both id site-header and class header-sticked , then

#site-header.header-sticked {
  /* blah */
}

will do.

However, if you want to address the id site-logo within, you need this

#site-header.header-sticked #site-logo {
  /* blah */
}

Note the space before the #site-logo , and the fact that you don't need any intermediate ids.

Answer 3

I'm not sure I understood your question but if you have : <header id="site-header" class="header-sticked" role="banner">

Then the following css will apply to the element

#site-header.header-sticked{
width: 100px;
height: 100px;
background: black;
}