Question: I am using post navigation for my blog. For this portion i wrote some css. It's working fine. But the problem is for the very latest post , it's showing blank space for next post link. Same thing is happened with oldest post, it's showing again bank space for previous post link. [![enter image description here](https://i.stack.imgur.com/SFMaK.png)](https://i.stack.imgur.com/SFMaK.png)

I add code snippet for this portion. Can i anyone suggest how can i modify my css for this portion. Following code is embedded in php file.

```
<div class="row justify-content-center">
    <div class="sewl-more-posts">
        <div class="previous-post">
            <?php If(previous_post_link()){?>
            <span class="post-control-link">Previous Article</span>
            <span class="post-name"><?php previous_post_link(); ?></span>
            <?php } ?>
        </div>
        <div class="next-post">
            <?php If(next_post_link()){?>
            <span class="post-control-link">Next Article</span>
            <span class="post-name"><?php next_post_link(); ?></span>
            <?php } ?>
        </div>
    </div>
</div>

```

Answer: 
First, output the divs only if they'll have content:

```
        <div class="sewl-more-posts">
            <?php if (previous_post_link()){?>
                <div class="previous-post">
                <span class="post-control-link">Previous Article</span>
                <span class="post-name"><?php previous_post_link(); ?></span>
                </div>
            <?php } ?>
            <?php if (next_post_link()){?>
                <div class="next-post">
                <span class="post-control-link">Next Article</span>
                <span class="post-name"><?php next_post_link(); ?></span>
                </div>
                <?php } ?>
         </div>

```

This way, if the previous-post or next-post div is missing, you'll be able to target the remaining one with the [`:only-child` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child):

```
.sewl-more-posts > div:only-child {
    text-align: center;
 }

```
You cannot do this with php once the page is generated client-side, therefore you have to use javascript (for example):

```javascript
onclick = documet.getElementById('the id you have').style.property = "blue";

```