The element selector is taking precedence over my class selector

Currently tackling a project for my university course and facing an issue with this section of my html+css code:

h1, h2, h3 {
  color: #747d19;
}
.name_date {
  color: #861781;
}
<div class="name_date">
  <h3>Shean</h3>           
  <p><i><b>August 3rd, 2018</b></i></p>
</div>

From what I know, a class selector is generally more specific than the element selector. However, in this case, the text "Shean" is displaying using the h3 color rule instead of the .name_date rule. What could be causing this unexpected behavior?

htmlcss

Answer β„–1

It is indeed true when the class selector is within an h3 tag.

h3{
  color: red
}
.purpleHeader{
  color: purple
}

<h3 class="purpleHeader">La la la la...</h3>

In order to achieve your desired outcome, you need to write a more specific rule.

.purpleHeader h3 {
  color: red
}
.purpleHeader {
  color: purple
}

Now the text is displayed in red πŸ˜ƒ

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

Unused sizing attributes in IMG tags

I can't seem to figure out what's going wrong here... I want the image tag to initially display the 250px wide "small" image, and then allow the browser to select the most suitable image using the srcset and sizes attributes - essentially, the " ...

html

What is the best method to connect a favicon in a Ruby on Rails application?

Here is what I am attempting. <%= image_tag 'favicon.ico', icon="rel" type="image/x-icon" %> ...

htmlruby-on-railsfavicon

Generate unique avatars with a variety of predefined image sets

Instead of solving my problem, I am seeking guidance on it: I have a project to create an Avatar maker in C# using a vast collection of categorized images. The concept is simple, but I lack experience in image manipulation through code, so I need some ad ...

c#cssasp.net-mvcimage-manipulationavatar-generation

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/η™ΎεΊ¦δΊ‘εŒζ­₯η›˜/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the ...

htmlcss

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

javascripthtmlcsssveltemapbox-gl-js

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...

css

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

csslayouthtmlcss-floatcentering

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

javascriptjquerycsshtml

Access the reset button on a dynamic image using the document.getElementById method

I'm still new to coding in JavaScript and I have a question. In my class, I was required to assign four buttons to four different JavaScript commands. I managed to get three of them working successfully, but the last one seems to be giving me trouble. ...

javascripthtml

Is it possible to display a subtle grey suggestion within an HTML input field using only CSS?

Have you ever noticed those text input boxes on websites where a grey label is displayed inside the box, but disappears once you start typing? This page has one too: the "Title" field works the same way. Now, let's address some questions: Is ther ...

javascripthtmlcsstextboxlabel

NuxtJS - Google Auth: ExpiredAuthSessionError: The authentication session has expired because both the token and refresh token have expired. Please try your request

I've been using nuxtjs for some time now. Everything related to authentication was working smoothly until my last update. However, after updating the nuxt.config.js file and moving the axios plugin from the plugins array to the auth config object, an ...

htmlvue.jsnuxt.jsnuxt-auth

The background image is functioning correctly, but there seems to be an issue with the image overlay

I attempted to design a profile page for my website users to have an image as a banner and their profile photo. I have achieved this: https://i.sstatic.net/kFlrQ.jpg However, when I apply the top-margin to the image, it both moves the image and expands t ...

javascripthtmlcssreactjsreact-bootstrap

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...

javascripthtml

Looking for the answer to utilize selenium for product scraping

I'm currently focused on a personal project involving parsing product names and prices. To achieve this, you can navigate to shoppingSite. After arriving at the site, click the button below the map, then click it again on the right side. Opt for the u ...

javahtmlseleniummavenscrape

What is the best way to conceal the outline in a popup window?

I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...

javascriptjquerycssknockout.js

Alignment of menu blocks

I'm struggling to line up all the menu items at the bottom - products, activity feed, and learn store should be on the same row, with test below products. Currently, products is being pushed up and text is aligning to the right of it. Despite trying ...

htmlcss

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

javascriptcssreactjsmaterial-uistyling

Issue with Bootstrap List Group Nested Links causing them to stop functioning after initial selection

I am trying to implement page navigation using the Bootstrap List-group class in HTML. However, I am facing an issue where the nested links 'Link 1' and 'Link 2' freeze after the first click. The desired functionality is as follows: ...

javascripthtmljquerybootstrap-4bootstrap-5