1

I have this:

<section class="menu-items">
<header class="menu-group-header">
  <h1 class="menu-group-title">TITLE</h1>
</header>
<article id="post-315" class="post-315 nova_menu_item type-nova_menu_item status-publish hentry nova_menu-asd123">
 <header class="entry-header">
  <h3 class="entry-title">asd</h3> 
  </header>
 <div class="entry-content">
 sth
 </div>
 <span class="menu-price">100</span>
</article>
</section>

I need to change font for the TITLE (h1 block). As I posted only partial HTML code, it is important that I use #post-315 as a reference in the CSS (I'm adding custom CSS in wordpress to override theme's original). Is there a reason for which code below is not working?

#post-315 ~ header > h1 {background: #5C5C5C; 
font-size: 200%; 
font-family: arial;}

It seems I cannot deploy it like here.

lieutenant07
  • 11
  • 4

2 Answers2

1

Because in CSS you can't go back in the DOM tree. Your header is placed before #post-315, so you can get it from there. The sibling selector ~ takes the next element matching your selection at the same level of your first selector, but it can't take a previous one.

UPDATE:

There is no way to select a previous sibling in CSS. You can use javascript for these case, or simply point to that element from a parent one (which isn't what you want as you said). Since you are using WordPress, you can use a hook to add a style tag just for the page who contains de post with ID 315:

function custom_style_for_315()
{
    if ( get_the_ID() == 315 )
    {
        ?>
            <style>
                .menu-group-title {
                    background: #5C5C5C; 
                    font-size: 200%; 
                    font-family: arial;
                }
            </style>
        <?php
    }
}
add_action('wp_head', 'custom_style_for_315');

You can place these lines in the functions.php file of your current theme. These styles will be added to your document <head> if the current page you are navigating is the post with ID = 315. It's not the most elegant way, but it should work.

Gerard Reches
  • 3,048
  • 3
  • 28
  • 39
  • Thanks a lot for an update. I don't really know anything about javascript or php, but I will do the backup of 'functions.php' , and definitely give it a try. I will reply later how it went. – lieutenant07 Oct 06 '17 at 09:59
  • Unfortunately the code isn't working. In the function there is `( get_the_ID() == 315 )`, whilst ID of sibling element is `post-315`. I changed that but it's not working either. Any ideas why? – lieutenant07 Oct 06 '17 at 10:33
  • @lieutenant07 It's not about the HTML element. Your HTML element with ID `post-315` should appear when you are in the page of the post with ID 315 of your database. With `get_the_ID()` you are checking the current page post ID and then comparing with the ID that you want. If it matches, these styles will be added to the page. – Gerard Reches Oct 06 '17 at 10:45
0

Siblings are elements which stands at one level, for example:

<body>
   <div class="section-1">
     <h1>Hello there</h1>
   </div>
   <div class="section-2"></div>
<body>

At this example siblins are section-1 and section-2, but h1 is child element of the section-1. So section-1 is parent of the h1 element.

What you need is get h1 which is child element of header:

.menu-group-header > h1 {...}
Maksims Kitajevs
  • 225
  • 1
  • 7