Applying borders to h4 with CSS Selectors

I've been attempting to add a border under the h4 heading "Best Sellers" on my website at using CSS. Despite trying in different browsers and clearing the cache, the border does not appear.

Here is the relevant HTML code snippet:

<div class="wpb_text_column wpb_content_element  best-sellers">
<div class="wpb_wrapper">
<h4>Best Sellers</h4> 

This is the CSS I used:

.best-sellers h4 {

border-bottom: 1px solid #eee;
padding: 7px 0px;

}

I also gave this CSS a try:

.best-sellers {

border-bottom: 1px solid #eee;
padding: 7px 0px;

}

Answer №1

Here's a solution that worked for me:

.page-template-template-home-default-php .wpb_wrapper h4 {
    border-bottom: 5px solid #999;
}

You can also attempt this alternative approach:

.best-sellers h4 {border-bottom: 5px solid #999;}

Answer №2

Experiment with:

.custom_div h4 { border-bottom: 1px solid #cccccc;}

You can also add a custom class to the h4 tag like this:

<h4 class="custom-border">Hello</h4>

.custom-border {border-bottom: 1px solid #cccccc;}

Answer №3

It is most effective to choose based on the parent div's class:

.wpb_wrapper h4 {
  border-bottom: 1px solid #eee;
  padding: 7px 0px;
}

As mentioned in the preceding response, when dealing with a parent div that has multiple classes, it is often necessary to select both in order to target the correct element:

.wpb_wrapper.another_class h4 {}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Influence of scoped styles on external webpages

I'm facing an issue with my nuxt app where I have two pages, each with different background styles. However, the background of one page is overriding the other. index.vue <style scoped> body { background-color: #ffffff; } #banner { backgr ...

PHP and WordPress are experiencing issues with character encoding

On certain pages of my website, the character encoding appears to be clean, while on others it is not good. For instance, you might see something like this: Flu¨e, instead of this: Flüe. I am currently using Wordpress with my own theme. My PHP documen ...

When trying to open an HTML table that was exported to .xls file using FireFox for downloading, it fails

I have been utilizing a function that was sourced from stackoverflow. It functions correctly on Internet Explorer and Google Chrome, however, on FireFox, the downloaded file cannot be opened in Excel. When attempting to open the file in Excel, it shows up ...

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

Is there a way to eliminate the padding for the bootstrap jumbotron specifically on mobile devices?

Hello, I am currently utilizing the bootstrap jumbotron class and facing an issue - when the screen size drops below 500 pixels, I want to remove the padding that is automatically set by Bootstrap (padding: 2rem 1rem;). However, I'm struggling to over ...

Error in HTML Sorting

I've been experimenting with some code from this fiddle: http://jsfiddle.net/kutyel/5wkvzbgt/ but when I copy it into Notepad++ and run it, it only displays: <html> Id: {{result.id}} Product: {{result.name}} Price: {{result.price | currency} ...

Should I use margin-top, padding-top, or top?

I often mix up padding-top, margin-top, and top. My issue arises when I need to create a space of 15px. Using margin-top: 15px seems to work, but I suspect it might be incorrect? .subtitles{ font-size:13px; font-family: "Open Sans","Helvetica Neue", ...

"Navigating back to the previous screen in Ionic 2 - A step-by-step guide

When using Ionic q, we can go back to the previous screen with $ionichistory.goback(). However, in Ionic 2, how can we achieve the same functionality? I have tried using a button with a click event to print a console message but it is not working. <ion ...

Unraveling stray text in Python BeautifulSoup4

<li><a class="atc-group atc-group-active" href="" data-url="/atc-kodlari/1"> <i class="fa fa-lg fa-pulse fa-spinner atc-group-loading" style="margin-right: 5px; display: none;"></i> ...

Show the present value within the bootstrap select dropdown

My goal is to filter specific information by clicking a button and displaying the current value in the input field. For instance: If I choose "fruits" from the dropdown list and then click the filter button, I expect the word "fruits" to remain in the se ...

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! https://i.sstatic.net/V6Rdr.jpg <html> <head> ...

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

The PHP mail() function is limited and cannot send attachments larger than 1MB

Whenever I attempt to send an email with a .zip or .rar file attachment, I encounter the issue of being unable to send files larger than 1MB. $to ="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7cdcec0c9c2d4cf89d3d7cbc6c5d ...

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

I am facing an issue with a SVG file that has mix-blend-mode styles defined on certain elements. The blending is working properly for the elements inside the SVG, but not for the background color of the HTML <div>. For instance: <!doctype html> ...

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

Steps for creating a file selection feature in Chonky.js

I recently integrated the Chonky library into my application to build a file explorer feature. One challenge I am facing is figuring out how to select a file and retrieve its unique ID when the user double clicks on it. const [files, setFiles] ...

The checkbox appears unchecked, yet the content normally associated with a checked checkbox is still visible

As the title suggests, I am encountering an issue with my code. Here is the snippet: $('#somediv').change(function() { if(this.checked) { $('.leaflet-marker-pane').show(1); } else { $('.leaflet-marker-p ...

Javascript-created HTML elements are failing to display on the webpage

As a newcomer to javascript, I am trying to dynamically create HTML elements using javascript for a class project. However, I am facing an issue where nothing is displaying on my page. Any help or guidance on what I might be missing would be greatly apprec ...