Questions tagged [pseudo-class]

CSS pseudo-classes allow for more specific selection of elements within a document based upon an element's status, location in the DOM tree structure, user action, or other factors.

Filter by
Sorted by
Tagged with
0 votes
2 answers
29 views

Focus is not trigger on details focus

The problem is to style the detail html element when the focus pseudo-class is trigger. The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is ...
  • 21.7k
0 votes
1 answer
26 views

Having problem with pseudo-class (hover) when combined with another id selector in CSS

When I use :hover pseudo-class with an image element that has only a class. It works just fine and all the properties are executed as specified in css. But only a few properties work on an image which ...
0 votes
1 answer
42 views

Pseudoclass on child conditional on data attribute of parent

I am trying to disable a button dynamically based on a data attribute that's present on the body, code looks sort of like this: <body data-online="true"> <button disabled></...
0 votes
1 answer
30 views

How to make the CSS :focus work on my project?

Can anyone help me? I tried to add a border-color using :focus on the form input when the user clicks on the text field. But it doesn't work. Any help is really appreciated. Thank you! form....
0 votes
2 answers
41 views

CSS ::marker pseudo-element why only couple of CSS properties work? why not all?

why ::marker pseudo-element not support all CSS properties like other pseudo-elements? can anyone explain me in brief. Found out today that ::marker pseudo-element not support all CSS properties like ...
1 vote
1 answer
77 views

Pseudo element color change on parent elements's active state change

I have a menu with a dropdown, its icon gets represented by a pseudo element. I need the color of the latter to be green when the dropdown is not active, but when it is active the pseudo element ...
0 votes
1 answer
79 views

onclick effect using just css

I'm trying to increases my skill on html and CSS, i wanted to have on click effect using just css. i know the way to do so using JavaScript put wondering if there is a way to do so using just css ....
0 votes
1 answer
48 views

Is it possible to add a hover effect on the pseudo element "after" itself?

I know I can add a hover effect on the real element that could, potentially, change the after pseudo element, but I need the after pseudo-element background to change when I hover on the after pseudo-...
  • 37
0 votes
0 answers
13 views

Is there any way to input a range of languages for the :lang() pseudo-class?

I'm targeting a bunch of different languages in my LESS/CSS with the :lang() pseudo-class. It looks like this (but even more languages): :lang(af), :lang(sq), :lang(eu), :lang(bs), :lang(ca), :lang(kw)...
  • 172
3 votes
1 answer
53 views

Nesting two pseudo-class hover in one react element for changing opacity in a div and scale an image

I am trying to change the behavior of two elements inside a div through the pseudo-class 'hover'. I would like when I hover the item, the div inside of it appears and the image scales its size. This ...
2 votes
1 answer
57 views

Show a hidden side panel with :checked

I would like to have a navigation menu in a side panel which can be toggled into view with an animated hamburger menu. I would like to create this with CSS only, without any JS. The :checked pseudo-...
  • 47
0 votes
2 answers
47 views

What is this CSS checkbox state called, and how can I remove its effects?

Consider this checkbox: <input type="checkbox" /> When pressing a keyboard button when this checkbox is focused, a solid black outline appears around it. I can get rid of by removing ...
0 votes
1 answer
62 views

Why on disabled Pseudo class background color of icon button is not changing

Carousel is working fine. But the issue is when there is no card on left the js function add disabled class to the left-arrow but on disabled i want the background color of icon to be dim and ...
  • 562
0 votes
2 answers
42 views

Changing an HTML Class with Hover Pseudo Class CSS

I'm newish to HTML/CSS (~2 months overall) and stack overflow (first post). Using fontawesome.com my idea is to make this icon flip when the cursor hovers over it. The icon flips when the class ...
0 votes
2 answers
37 views

Problem with changing properties of :hover

I'm unable to change background-color of list items to black while :hover. one the other hand there is no problem with changing color. .nav li { display: inline-block; height: 100%; padding: ...
-1 votes
1 answer
61 views

how can I format the text size in a pseudo class ::after

I want to format the size of the text inside of a ::after pseudo element. div{ width: 200px; height: 200px; background-color: tomato; } #Seite1::after, .DivTableRotated::after { content:...
-2 votes
3 answers
46 views

Is there a pseudo-class selector for javascript modified nodes?

function myfunc(){ document.getElementById("bob").innerText += "azerty"; } #bob{ color: green; transition: all 1s; } #bob:modified{ /* ":modified" pseudo-class doesn't exists; I'm ...
0 votes
1 answer
19 views

Is there a pseudo class like nth-of-type that also considers children of same type? [duplicate]

Look at the following example: .card{ width: 100px; line-height: 100px; text-align: center; margin: 5px; float: left; } /* Important below */ .card:nth-of-type(1){ background-color: ...
  • 427
0 votes
1 answer
59 views

Within a radio-group how does one target via (a) css-selector(s) unchecked controls while there is also a checked/focused control amongst the group?

Is it possible within a radio-group to change the style of a radio button that has not been checked after the other button has been checked? I have 5 radio boxes. I gave a custom style to the checked ...
0 votes
1 answer
33 views

CSS link pseudo class does not get applied

This is my HTML <ul class="anchor"> <li><a href="https://www.google.com" target="_blank">Item1</a></li> <li><a href="...
  • 1,405
-1 votes
2 answers
123 views

Why does this pseudo class for links not work?

I am trying to set the third link in a list with a different color, but everything does not work well. All colors of the 3 links change to the #5bacc3 color. Here is my code: HTML code: <ul class=&...
-1 votes
3 answers
116 views

What CSS selector syntax finds multiple pseudo classes on the same element?

What CSS selector finds all unchecked and disabled checkboxes? Those links provide answers to how to find unchecked or disabled checkboxes, respectively, and this question shows how to find an element ...
0 votes
0 answers
17 views

What is the difference between a:hover { } and a :hover { } in CSS [duplicate]

I just happened to insert a space between the a tag name and the colon in my CSS file and this changed the output. What is the difference between the following two CSS selectors: a:hover { ...
0 votes
0 answers
72 views

How to keep nav-menu link underline after reload if the underline is via ::after element

I have nav-menu with hover efect underline the text looking like this. I would like to keep the underline after clicking and opening that page. Problem is that the underline is through ::after element ...
  • 1
0 votes
1 answer
165 views

Input type checked in checkbox to transform using CSS

I have an input type with content ">" , shown in below pic, clicking on which a row of a table expands. I have used input type "checkbox" which when checked, I want to ...
  • 265
1 vote
0 answers
385 views

Use CSS pseudo elements as inline CSS in email template

I am trying to design email template. In a table, clicking on a row, more info shows up. Here is the fiddle: https://jsfiddle.net/0oyubtaL/ However, the problem is that mobile app of outlook doesnt ...
  • 265
-1 votes
1 answer
135 views

Why isn't nth-child() working with other divs?

I have an html structure that foresees some divs inside a main container. I am trying to apply a css style to the first div of global_container account with nth-child but it is not working. Now I have ...
  • 163
0 votes
2 answers
30 views

If there are two child elements nested within a div with an ID, how do you select the first child and change the first letter in CSS?

I am a new programmer working on a project and I want to be able to change the first letter of the first <p> under a <div> with an id. at this point my code looks like this: #content&...
0 votes
1 answer
60 views

How do I select every instance of a class on a page, but not the first instance - regardless of parent?

I want to set every div with the class="wp-block-column" to 'display:none;' --> but not the first one. I am having trouble :not selecting the first div with the class="wp-block-...
-1 votes
1 answer
68 views

How to make Pseudo classes with commas work?

So the problem is when i try to give pseudo classes same css properties and do it with comma it just doesn't work. But separatly they work great. ul > li:not(:first-child), ul > li:not(:last-...
1 vote
2 answers
55 views

How do I select every instance of a class on a page, but not the first instance?

I want to set every div with the class="wp-block-column" to 'display:none;' --> but not the first one. I am having trouble :not selecting the first div with the class="wp-block-...
0 votes
0 answers
12 views

Css "nth-of-type(odd)" with class not working [duplicate]

I am trying to target odd elements based on class, I have tried both nth-child and nth-of-type but couldnt get the result. What I am doing wrong here. Ideally it should select 1 and 4 instead of 1 and ...
0 votes
1 answer
406 views

pseudo class before with background colour not working safari

Pseudo class before with background colour not working in safari Please refer to codepen here https://codepen.io/deepeshk12apr/pen/gOezENr HTML <div id='test'> <p>Test </p> </...
1 vote
1 answer
71 views

How to include more tags inside nth-child()

I have some doubts about using nth-child. I would like to understand if it is possible to include multiple tags inside nth-child() instead of writing them each time. For example, I have 6 elements and ...
  • 163
2 votes
1 answer
62 views

Why selector "input:read-only, input:-moz-read-only" won't work on Google Chrome? [duplicate]

Why selector input:read-only, input:-moz-read-only won't work on Google Chrome? Works only, if I write it as two separate selectors input:read-only, input:-moz-read-only with same instruction. ...
0 votes
1 answer
31 views

Image in pseudoclass before on github pages

Put png in content in pseudoclass ::before. Tryed every path, GitHub pages wont show it. https://github.com/tacticSugar/Resume - Repo https://tacticsugar.github.io/Resume/ - Page .work h3 { padding-...
0 votes
2 answers
46 views

Deactive the :ckecked pseudoclass on an input[type="checkbox"] clicking on another element, in pure CSS

I realized the Css click with che :checked pseudoclass. When I click on the label associated with the input (checkbox) I give a margin to the label. I would know if there is a way to deactive the ...
  • 1,327
1 vote
1 answer
333 views

Vue - Dynamically add style to :active pseudo class?

I have a menu built with Vue.js (and Vuetify), data passed in from the backend like: [ { id: 13241243, color: "#123456", activeColor: "#abcdef", text: "...
1 vote
1 answer
270 views

input[type="email"]:valid and input[type="email"]:invalid aren't working

When an email field in my form is selected, the label that describes the email field moves up and gets smaller: My code looks like this: input:focus + label, input:valid + label /*Is supposed to ...
0 votes
1 answer
61 views

Click on event causing change in pseudo class style

I'm trying to hack the jspsych's slider bar component. So in jspsych's source code, they have .jspsych-slider { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; ...
0 votes
1 answer
217 views

Clip-path: Curved edges, background image and triangle

I am trying to build the following element with rounded corners and a background image: I originally used the :after pseudo element for the triangle, but I couldn't get the background image to 'bleed ...
  • 133
-2 votes
2 answers
71 views

display:block with pseudo-class not working inside div

I was working with pseudo-classes (link, visited, and active) and I have an issue about positioning a link below the others (like a list, I know I can use a list but want to know why is this happening)...
0 votes
1 answer
97 views

'Display: contents' does not work with tree-structure pseudo-classes (:first-child,: last-child, etc.)? [duplicate]

My question: is this intentional? I can't find any literature or conversation about it. The selector spec says it's for inclusive siblings - https://www.w3.org/TR/selectors/#child-index - but doesn't ...
0 votes
1 answer
94 views

hover only on specific object

I want that the :hover in CSS will work on the whole row in the table at once (if the mouse will be over the image, so the hover will work on both text and pic - same as if the mouse is over the text),...
  • 1
-3 votes
1 answer
102 views

Why is the first-child considered a pseudo selector but a pseudo element like the first-line?

I mean they both are dynamic and actualy exists in DOM. I think generally I know difference between pseudo elements and selectors but this one is a little bit subtle that makes me confused.
user avatar
1 vote
1 answer
39 views

Why Pseudo class nth-child(x) pics wrong class?

Sorry for messy title but this is the code (It's a fandom project I'm doing) <style> .portable-infobox.pi-theme-UUInfo section.pi-panel:first-child ul.wds-tabs li.wds-tabs__tab:nth-child(2){ ...
0 votes
2 answers
81 views

::after pseudo class not being properly applied to an anchor tag for hover animation

I want a red underline to display below my "BOOK NOW" anchor tag when a user hovers over it and also the text color to change to white. For some reason, the text color is not changing. I ...
0 votes
1 answer
78 views

How do I use pseudo class css to list item?

I wanted to color the "Home" button from the navigation list to make it blue. I've used the code below but it doesn't work. I can't find it actually where's the problem? nav { display: ...
0 votes
2 answers
79 views

Is it possible to change the button CSS class state from ".ripple" to "ripple:active" by using js without manually clicking the button?

Using JavaScript's click simulation does not work for CSS pseudo-class :active. After I tried some classList methods, it still doesn't work. I just wonder if there are some possible ways to realize ...
  • 9,143
0 votes
0 answers
113 views

Accordion open and close button moves to the bottom on mobile

I created an accordion which acts pretty well. Anyways on mobile in chrome and safari the plus and minus "button" which I have implemented with the :after pseudo class is displayed at the ...

1
2 3 4 5
19