Assigning a variety of background colors to the H1 element

While I've looked at similar questions on SO, I haven't found the exact solution I'm seeking. What I want is to style two different lines with different background colors.

I attempted this styling:

h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
h1.g1-mega.g1-mega-1st.entry-title:last-line {background:#ddd;}
<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">Top 25 Wild Bird Photographs of the Week: Mountain Birds </h1>

Please see this fiddle for reference.

The CSS for the second line isn't functioning as expected.

htmlcsscss-selectors

Answer №1

span:first-child {
  background-color: yellow;
  padding: 10px;
}

span:last-child {
  background-color: lightgreen;
  padding: 10px;
}

h1 {
  line-height: 1.8;
}
<h1><span>Top 25 Stunning Bird Images</span><br>
    <span>of the Day: Exotic Birds </span>
</h1>

Answer №2

h1.giga-mega {background-color:#dddddd;}
h1.giga-mega:first-letter {background-color:#ffd334;}

Answer №3

span {
  padding: 10px 8px;
  display: inline-block;
}

span:first-child {
  background-color: yellow
}

span:last-child {
  background-color: lightgreen;
}
<h1>
  <span>Captivating Wild Bird Photos</span>
  <span>of the Week: Mountain Birds </span>
</h1>

Answer №4

If you don't have a specific last-line selector, one option is to style the h1 and then override the styling for the first line using the first-line selector:

h1.g1-mega.g1-mega-1st.entry-title {background:#ddd;}
h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">
Top 25 Wild Bird Photographs of the Week: Mountain Birds 
</h1>

Keep in mind that not all properties can be applied with the first-line selector - refer to this list of allowable properties here:

Only certain CSS properties are compatible with the ::first-line pseudo-element:

All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family

All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode

The color property

word-spacing, letter-spacing, text-decoration, text-transform, and line-height

text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

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

What is the best way to show a background specifically for ads when adblock is activated?

I am looking for a way to display a background image in place of a 300x250 ad when it is blocked by adblock. Does anyone have a solution for this issue? Using a div currently shows the background before the ad loads, which is not the desired outcome. Than ...

javascriptcssadblock

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

When incorporating additional HTML elements into a webpage using Javascript or jQuery, along with external CSS declarations, it is important to avoid conflicts with existing IDs and class names already present on the page. This could lead to issues if ther ...

javascriptjqueryhtmlcssdom

Unique background image is assigned to each div sharing the same class

Seeking a way to assign unique random backgrounds to each div with the .item class. Initially attempted using PHP and CSS, for example: <?php $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg ...

javascriptphpjquerycssrandom

Learn the process of sending notifications upon clicking on an advertisement by a user

I'm currently working on a system that displays ads on mobile devices. Our clients have the option to use their own custom HTML code for their advertisements. We want to be able to track when a user clicks on these ads. I am considering wrapping the u ...

javascripthtmlajaxclickads

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

javascripthtmlcss

How can I add an SVG tooltip that appears when I hover my

I have successfully implemented an SVG map showing marked locations and polygons, with CSS styling that makes the areas stand out on hover. I achieved this without using any JavaScript code. My next goal is to create a hovering window or tooltip that disp ...

javascriptjqueryhtmlcsssvg

Problems with Displaying Content in HTML

Having trouble with displaying the apostrophe within my code: if (type == 'Survivor') { display = isProxy ? (finishedRegistration ? '' : 'Unfinished ') + (name.substr(name.length - 1) == 's' ? name + '&rsqu ...

javascripthtml

Guide to verify the user selection within a select form

Here is a form with a select field: <form method="post" name="posting_txt" onSubmit="return blank_post_check();" id="post_txt"> <select style="background: transparent; border-bottom:5px;" name="subname" class="required"> ...

javascriptjqueryhtmlajaxjquery-plugins

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

cssangularbootstrap-4bootstrap-modal

Adjusting the z-index of a marker on Google Maps' data layer

While creating a Google Map, I encountered an issue where overlapping circles needed their z-index changed upon hover to bring them to the front. I found a solution for markers in this link: changing z index of marker on hover to make it visible. However, ...

javascriptjqueryhtmlcssgoogle-maps

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?

I have the following content in an HTML file: <!DOCTYPE html> <!-- --> <html> <head> <script src="java_script.js"></script> <link rel="stylesheet" type="text/css" href="carousel.css"> & ...

javascriptjqueryhtmlcss

How to Use Jquery to Deactivate a Div with a Background Color

Currently, I have a div that contains several child divs. My goal is to disable the parent div and all of its children, showing them in gray color. I initially tried using the CSS property opacity, but unfortunately, the background color didn't change ...

jqueryhtmlcss

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Looking for help with extracting user input from HTML and performing mathematical operations in JavaScript. Coming from a Python background, the variable system in JavaScript is confusing to me. Can someone provide guidance on how to achieve this? <div ...

javascripthtmlcssvariablestype-conversion

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

htmljquerycssformsdate

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

htmlangularjsgoogle-mapscordovaionic-framework

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

htmlcssreactjs

I would appreciate your assistance with the hide button

Is there a way to hide a button after clicking on it? I would greatly appreciate your help! ...

javascripthtml

WordPress FlexSlider carousel displays all images on initial slide

I've been using the Nictitate theme for my WordPress website, which comes with a client widget to display logos. I noticed that FlexSlider is used in other widgets within the theme, so I added some code to create a carousel of client logos. Unfortuna ...

javascriptphpjquerycsswordpress

A tutorial on utilizing fopen in PHP to write text lines to a .txt file

Struggling with PHP code utilizing fopen to write text lines into a textarea and save them to a .txt file. Below is the code I've been working on, hoping to get some assistance! <?php session_start(); if (!isset($_SESSION['username&ap ...

phphtml