So I'm working on an HTML page with a div that looks like this:
<div class="get-this"> blah blah </div>
I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pseudo element.
.get-this:not(::before) {
padding-top:2px;
}
Right now, the style is being applied to the entire div. Is there a way to limit the styling only to the div itself, and exclude the pseudo element?
Utilizing the cascade in a simple way.
The CSS cascade allows for the application of broad styles to general selectors and more specific styles to specific selectors.
For example:
.get-this {
padding-top:2px;
}
.get-this::before {
padding-top:0;
}
Example in Action:
.paragraph-one {
color: red;
}
.paragraph-two {
color: blue;
}
.paragraph-one::before {
content: 'Paragraph One: ';
}
.paragraph-two::before {
content: 'Paragraph Two: ';
color: green;
}<p class="paragraph-one">This is paragraph one. It is red.</p>
<p class="paragraph-two">This is paragraph two. It is blue.</p>
<p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p>When all your div elements already have CSS applied before or after, you need to add content: ""; in order for the styles to show up on DOM:before or DOM:after.
If you set content to none, it won't display anything. To override the div styles, you can simply do:
.get-this:before {
content: none;
}
However, it's advisable not to apply before or after properties to every div element in your application. Div elements are commonly used in many situations, so encountering issues like the one you're facing now with every div element and having to write CSS to overwrite it is generally not a good practice.
Furthermore, if the position of your DOM element with before or after is related to its parent DOM, any changes in padding, margin, positioning, or size of the DOM will also affect the before or after of that DOM.
I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...
Currently, I have set up a table where the data can be edited by clicking on a hyperlink and then saving the changes with a button. The issue I am facing is that when I click on the edit link, all rows become editable instead of just the specific row I cli ...
I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...
I have a substantial amount of posts created using an old CMS. The content is in HTML markup, but unfortunately it's quite messy. It includes constructs like: ....<IMG alt="Хит сезона - <b>Лучшие фразы...</b>" src=" ...
I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...
Essentially, the issue is that a very simple Bootstrap 5 spinner does not spin in Firefox. It works fine in Chromium and all other Bootstrap components work well in Firefox as well. Here is the html code (identical to Bootstrap docs): <div class=&q ...
After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...
Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...
Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...
I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...
Can anyone suggest a way to generate an image from pure HTML using PHP, possibly utilizing the GD library or other similar tools? I am looking to display icons from external sites and considering if creating an image would help improve load times. If not ...
I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...
When it comes to web development, HTML markup is utilized for structuring content, while CSS is used for styling and presenting that content. In the past, HTML elements like <div> were often assigned semantic meaning through the use of IDs and class ...
I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...
Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...
I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...
Hey there, happy Friday everyone! I've been working on rebuilding my company's website to learn HTML and CSS. I'm currently creating a replica of the original site and it's going really well so far. However, I've run into some is ...
Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...
Within my Facebook canvas application, I have links that need to open in a new tab or page when clicked by users. How can I achieve this? To redirect users to the Facebook login page, I am currently using JavaScript location. A few months ago, I came acr ...
I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...