Is it possible to achieve something like the following using only CSS?
h* + p {
color: red;
}
Instead of
h1 + p, h2+p... {
color:red;
}
I haven't found a solution yet, any suggestions would be appreciated. Thank you!
Is it possible to achieve something like the following using only CSS?
h* + p {
color: red;
}
Instead of
h1 + p, h2+p... {
color:red;
}
I haven't found a solution yet, any suggestions would be appreciated. Thank you!
To enhance your styling capabilities, consider utilizing a preprocessor such as Less or Sass.
If you opt for Sass, here is an example of how you can leverage it in your Sass file:
`@for $i from 1 through 6 {
h.#{$i} + p {
color: blue;
}
}`
CSS alone has its limitations!
It seems like the question has been around for quite some time. Nevertheless, nowadays a similar outcome can be achieved using the :is pseudo-class, without the need for any preprocessor.
:is(h1, h2, h3)+p {
color: red;
}<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sic enim censent, oportunitatis esse beate vivere. Tu vero, inquam, ducas licet, si sequetur; Illa argumenta propria videamus, cur omnia sint paria peccata. Sit sane ista voluptas. Cur, nisi quod
turpis oratio est? Quasi ego id curem, quid ille aiat aut neget.</p>For more information on browser support, you can also visit caniuse.com.
After creating a new MVC web project using VS2017, the default app's navigation menu bar appeared normal. https://i.sstatic.net/S3Pcc.png However, upon upgrading the Nuget packages (specifically Bootstrap from 3.3.7 to 4.1.3 and Popper 1.14) and run ...
I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop. Alth ...
In my application, users can read news items and leave comments. These comments are then analyzed using NLP techniques to classify them as either positive or negative. My goal is to display the percentage of positive and negative comments for each news ite ...
I have successfully developed my own custom "like" button feature. Utilizing AJAX, I can seamlessly update the database to increment the "like" count by 1. Subsequently, JavaScript handles the task of updating the first "like" button with the revised infor ...
Looking for clarification, I've noticed a pattern of "adding" (although unsure if that's the correct term) classes to elements in HTML UI frameworks. For instance, considering an element with these class attributes: class="mif-earth mif-2x" To ...
I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...
I am having an issue with the collapse feature not working when I click on the toggle button. Below is my code snippet. Can you help me identify what changes are needed for it to function properly? <!DOCTYPE html> <html lang="en" dir=& ...
I have a code snippet using material-ui that I want to center on the page, but it's not working. Can someone please help me fix this issue? Thank you in advance. import React from 'react'; import { makeStyles } from '@material-ui/core ...
While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...
I am facing an issue with extending my header and footer in Django. The problem is that when I pass data to the footer, it only appears on the home page and not on other pages. I understand that I need to pass the data to every page individually, but I am ...
Currently, I am in the process of building a small portfolio website. Despite my attempts to style an avatar using the makeStyles class, it seems that the Mui avatar root is overriding my desired styling. I am wondering if there is a way to achieve this w ...
My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...
My personal page features a section dedicated to displaying my skills and proficiency in various programming languages (although it may not be entirely accurate). I am struggling to adjust the width of the Skill grid to match the layout of the other grids ...
Task Tailwind React When adjusting the scale of an iframe, it disrupts its position within the grid. Expected Outcome: The iframe should maintain its position after scaling, but with a smaller size. Current Behavior: The iframe's position is be ...
Despite the fact that IE does not support mouse events on <option> elements, it does highlight the option under the mouse cursor when you open a dropdown list. Is there a way in JavaScript to capture this highlighted option as the user moves the mous ...
Here is the code for a card footer that I am having trouble with: <div class="card text-center"> <!-- CODE FOR card-header, card-body --> <div class="card-footer"> <div class="d-flex justify-content-center"> ...
I am looking to add a delete button or an Angular trash icon to a mat-table in an Angular application. Can anyone guide me on how to achieve this? Here is my current table code: <mat-table #table [dataSource]="ELEMENT_DATA"> <ng-container cdk ...
Currently, I am referencing this tutorial My goal is to make the image smaller and centered on the page I have made adjustments to the CSS to decrease the size: min-height: 350px; max-width: 900px; However, the image is still aligned to the left and th ...
Recently, I decided to revamp the look of the input controls on my website. I made some changes in the code like so: //Updating bootstrap variables $input-bg: $background-color; $input-color: yellow; $input-border-color: $gray-500; $input-focus-border-colo ...
As a beginner in php and html, I have been tasked with creating a drop down list along with other inputs to establish parameters for a perl script. The objective is for the selected option from the drop-down menu to set a variable equal to the user's ...