What could be the reason for this code not functioning properly?
::selection:first-child{
background-color: #ffa563;
}
It seems to work well for :first-child:last-child (when element is both first child and last child)
What could be the reason for this code not functioning properly?
::selection:first-child{
background-color: #ffa563;
}
It seems to work well for :first-child:last-child (when element is both first child and last child)
::selection does not target an element directly. You can try using :first-child::selection for it to work correctly.
:first-child::selection {
color: red;
}<div>First Child</div>
<div>Second Child</div>Confusion between pseudo classes and pseudo elements seems to be occurring here. The ::selection is actually a pseudo element, meaning it doesn't have any content and only functions with specific CSS attributes.
To apply styles to the selection in the first child element, you should use :first-child::selection instead.
For better results when using selectors like "::selection" or ":first-child", it is recommended to specify the container they belong to.
<div>
<p>text 1</p>
<p>text 2</p>
</div>
Here is the corresponding CSS:
div p:first-child::selection {
color: red;
background: yellow;
}
This will cause the first 'p' element to display differently when selected.
Keep in mind that the :first-child selector does not take into account any preceding selectors. For instance, p:first-child will not be a match in the structure
<div><h1></h1><p></p></div>p tag is not the first child.
In the same way, using ::selection:first-child would not match the initial selection but instead an element that has been selected and is also the first child. It essentially becomes the same as :first-child::selection.
The reason this combination doesn't work is because ::selection is a pseudo element. When applied, it generates an element that can be matched with CSS. However, since this pseudo element does not actually exist within the DOM, it cannot be considered the first child of anything, causing the entire selector to fail.
As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...
After submitting the form, I am attempting to hide it and display a loading GIF. I've experimented with various methods, including changing ClassName to Id, but haven't had success. This is for a school project, and I've spent a significant ...
I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...
I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...
Let's say we have a div element like this: <div class="nav-menu"></div> I want to customize the CSS style for scrollbar using the ::scrollbar pseudo-element: .nav-menu::-webkit-scrollbar { width: 8px; background: white; ...
I need the Button element to always take up 100% of the container, no matter how many elements are inside. Check out my Fiddle link here: Js Fiddle Link <div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-va ...
Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...
I am trying to pass a variable from the model ts into a specific nth-child element, but I am struggling with how to accomplish this. My current code snippet looks like this: ts model: @Input() public limit: number scss: .collapsed-list { max-height:15r ...
I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...
I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...
I am attempting to create a circular border around an emoji, contained within a span inside a div. The 50% radius border should appear on hover, which it does, but the content in the span gets pushed below the div. Refer to the screenshot provided. <di ...
I am currently utilizing CodeIgniter for my personal website, which includes multiple textareas. I am looking for a solution to prevent HTML tags from being stored in the database. Is there a tool available that can strip out any unwanted tags? Additional ...
I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...
I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...
I am facing a challenge with changing the transparency of a <div> element's background color using jQuery. An external API provides me with a hexadecimal value for the color: #abcdef I make use of jQuery (version 1.9) to apply this color using ...
Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...
One issue I encounter is when attempting to save an edited value on the same index, but the value cannot be saved because the editing mode has not been closed. This pertains to a TypeScript File where I need to save the edited value in a selected Command ...
My website uses Bootstrap and a KendoUI data grid where each row has a button like this... <button type="button" id="requestbtn1" class="btn btn-success">Request</button> I've written some JavaScript to handle the click events of these b ...
I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...
Each time I create a new page, there is a slight horizontal scrolling issue that occurs. When the page scrolls horizontally, it leads to a white space where nothing exists beyond the footer and header at the edge of the screen. Even though it's just a ...