Choosing a class using CSS

Can someone please help me with editing this HTML code using CSS? I'm trying to target the coupon divs using #coupon but it doesn't seem to be working. Any assistance would be greatly appreciated.

<div class="coupon">
   <h1>Classic Combo</h1>
   <p>16" 1-Topping Pizza
      &amp; a 2-Liter of Your Choice
      For Only $14.99
   </p>
   <p>Expires 3/14</p>
</div>
<div class="coupon">
   <h1>Pizza &amp; Stix</h1>
   <p>16" Specialty Pizza
      Reg. Cheese Stix &amp; a 2-Liter
      For Only $21.99
   </p>
htmlcss

Answer №1

.discount, not #discount

When writing CSS, remember that . refers to a class name, while # refers to an element's id

Answer №2

Utilize this for styling in CSS

.discount{
    // add your custom styles here
}

In CSS, # signifies an id selector and . indicates a class selector

Answer №3

When targeting elements by their id, make sure to use the .coupon selector instead of #coupon. This adjustment should resolve any issues you were encountering :)

Answer №4

When coding in HTML, it is important to remember that IDs must be unique. This means that you should not have two or more elements with the same ID. If you use id='something' in your HTML, you should refer to it in CSS using # before the ID. If you have a class, you should use class='something' and refer to it in CSS using ..

For example, if you have a class in your HTML called .coupon, you should use .coupon in your CSS, not #coupon.

IDs have priority over classes, so if you have an element with both an ID and a class, the styles applied to the ID will take precedence over the styles applied to the class.

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

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

htmlangulartypescriptrenderer

Submit Button Not Responding on Mobile Device

I am facing an issue with my VueJs app. The contact form works perfectly on browsers, but when accessed from a smartphone or tablet, it fails to function properly. I have tried two different implementations to resolve the problem. Here is the first implem ...

htmlformsvue.jsvuejs2

The select element is displaying with a different width compared to its sibling, causing the Bootstrap spacing to over

Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller. When I assign the class "col-6" to both fields, t ...

htmlcsstwitter-bootstrapbootstrap-4

The erratic nature of Tailwind actions

Currently, I am immersed in a Livewire project and attempting to implement some Tailwind theme configurations. However, the process does not appear to be coherent whatsoever. Here is an excerpt of my Tailwind configuration: theme: { extend: { f ...

csslaraveltailwind-csslaravel-bladelaravel-livewire

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

javascriptreactjscssreact-nativereact-native-textinput

Using Angular, I am passing a controller variable as a parameter to a custom filter in the HTML `ng-repeat`. This parameter will be populated within a function so that

At the moment, my setup includes a controller, a filter file, and some HTML. Currently, I am using ng-repeat in the HTML with custom filters that I have created based on the filter being used. For example: ng-repeat="p in persons = (person | toArray | fil ...

htmlangularjs

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

htmlcsswordpresscss-floatcustomization

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

javascripthtmljspflash

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

javascripthtmlangulartypescript

Organizing playing cards in a React JS application

As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly apprecia ...

cssreactjscard

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Utilizing jQuery to emphasize a selected table row upon radio button selection

When I have a table (standard markup) with a radio select in each row, I want to highlight the selected radio button. It seems simple, but for some reason it's not triggering as expected. Here is the example of the markup: The Table Row: <tr> ...

jqueryhtmladdclass

Steps to Deactivate Dates in React Beautiful Dates Component

I found this amazing Calendar library at . Within the library, I am utilizing the <DatePickerCalendar /> component. Currently, I have stored three dates in an array: [date1, date2, date3] My goal is to disable these specific dates in the calendar s ...

javascripthtmlreactjs

Arranging Functions in JavaScript

I am encountering an issue regarding the execution of JavaScript functions within HTML. Specifically, I am using dimple.js to create a graph and need to select an svg element once the graph is created via JavaScript. Despite placing my jQuery selector as t ...

javascriptjqueryhtmlsvgdimple.js

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...

javascripthtmlcsstwitter-bootstrapglyphicons

The ng-model does not reflect changes when using the JQuery datepicker

Currently, I have set up two textboxes for users to choose a date. I am utilizing JqQuery's datepicker UI to showcase a small calendar pop-up whenever the user clicks on the textbox. However, an issue arises when I select a date in the calendar popup ...

javascriptjqueryhtmlangularjsdatepicker

Trouble extracting data with XPath query in Python

Currently, I am attempting to extract specific information from this particular webpage. However, there are three crucial pieces of data that have proven to be quite elusive. Firstly, I am struggling to retrieve the grade, denoted by '5.6' next ...

jquerypythonhtmlcssxpath

Creating a perfect design with Font Awesome 5 SVG icons and vertically aligned text at the top

Check out my code example on CodePen, view source. I'm looking for a way to align an icon and text vertically without using JavaScript. I want to maintain the li element's line-height and other styles. Any suggestions? ...

htmlcssfont-awesome-5

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

Enhancing HTML Documents with the Header Element

When HTML 5 was implemented, it brought along new semantic tags such as header and footer. I find myself puzzled on whether I should use the header tag directly or assign a class of "header". Which option is superior and why? ...

html