Questions tagged [css-selectors]

Selectors are patterns that match against elements in a document tree. In a CSS rule, they are used to define styles for elements that match the pattern.

Filter by
Sorted by
Tagged with
-1 votes
0 answers
9 views

Adding CSS in a Single Situation, Using only CSS

I am trying to only add CSS to a certain scenario. Here is the html A: <div class="layout-3col"> <main class="layout-3col__full"> <h2 class=&...
cthrasher's user avatar
0 votes
1 answer
28 views

TypeError when running selenium web driver

I'm currently in the middle of an online python course and have been mostly progressing without issue, or at the very least eventually being able to solve them, however this one has me stumped. I'm ...
TheFakeLex's user avatar
0 votes
0 answers
8 views

hr nth child selector not showing colour

I'm trying to add a 3 colors border-top on the card, which works. Using the same nth child selector, i would like to do the same effect to a border colour on the hr, so the hr colors match with the ...
Distortion's user avatar
0 votes
0 answers
24 views

Override more property in a more specific rule

I've stumbled upon the following problem: I have navbar-nav class element which contains elements of nav-link class and I want to set padding for nav-link since text seems to not fit in the element's ...
Iamnotagenius's user avatar
0 votes
0 answers
16 views

Can't use :last-child when importing component

I've created a component app-day-part and importing it in a parent component <app-day-part *ngFor="let part of dayParts; let lastItem = last" [partBlock]="...
Paul Polishchuk's user avatar
0 votes
0 answers
16 views

How to select p tags without class attributes in Selectolax

I am trying to select some p tags without class attributes using Selectolax without success. This is my code: from selectolax.parser import HTMLParser tree = HTMLParser( ''' <p class=&...
glenn15's user avatar
  • 701
0 votes
1 answer
53 views

Google Tag Manager Variables - Extract Price Based on Field Label

I believe the value of the classes in my use-case rotate or change which has caused my current approach to not work. Current Approach Below: var elements = document.querySelectorAll('ul.sc-kUVfrs....
Carson Whitley's user avatar
-2 votes
1 answer
97 views

How to make flex alignment of elements based on the previous flex item

I want to have 'text1' under the number 1 (like the 't' character should be under the 1), and 'text2' under the number 5 (like the '2' character should be under the number 5) It should be done ...
Serhii Yurko's user avatar
-1 votes
0 answers
12 views

How to find elements which are inside an <inject-component></inject-component> using Scrapy

I am trying to scrape a website using Python Scrapy. There is a div inside an inject-component. I need the hrefs present inside that div, but i am unable to find the div using its class in css ...
Afnan Bashir's user avatar
2 votes
2 answers
60 views

How do you select the nth item in a list based on that item’s child's attributes using only CSS selectors

So if I have a list like this: <ul> <li><button disabled/></li> <li><button disabled/></li> <li><button /></li> <li><button /&...
Preston Moore's user avatar
0 votes
1 answer
34 views

Getting hold of dynamically generated object with the help of selectors

I am doing this todolist project, where I can create projects and inside each project I would have the ability to add tasks, now the solution I found was to create an array of task object inside of ...
molLbach's user avatar
-1 votes
1 answer
55 views

Cant position ::before Pseudo Element behind its parent [duplicate]

I tried to create a div, and have its ::before appear behind it to make it seem as some sort of shadow, but for some reason I cant get the pseudoelement to appear behind the original element. <div ...
Rostique's user avatar
0 votes
1 answer
33 views

Finding element using tagname and text (CSS)

We have taken over support for an organization in the company who gets a new release once a year. We did not write the original code. I entered a name in a search box and got a couple of options (see ...
Tony's user avatar
  • 1,123
0 votes
0 answers
32 views

How to set checkbox so :checked is accurately evaluated

I have the following html/css which hides a checkbox and displays a left/right toggle in it's place. When it's checked the following css kicks in. document.getElementById("partner-1").checked = ...
geoff swartz's user avatar
  • 5,595
-1 votes
0 answers
13 views

How to give animating behaviour to our webpage with help of HTML and CSS? [closed]

I want to know what are the tags and selectors and animation tags we should use to add animations to webpage... I have tried using "hover" keyword but I want an output like background of ...
Ayush's user avatar
  • 1
-1 votes
1 answer
45 views

How to chain data attribute and disabled selector in tailwind?

I have an button with data-loading=true and disabled attributes. I need to write a style in tailwind that applies only if data-loading!=true and disabled. <button data-loading='true' disabled>...
SabirAmeen's user avatar
0 votes
2 answers
59 views

How can I make the ":not" selector work for other classes when the "hover" effect happens?

I'm making a panel that has 3 cards and when I hover the mouse over one of the cards, the others become "blur", but :hover:not(:hover) doesn't work, could anyone tell me how to make it work? ...
Icaro Ag's user avatar
-1 votes
0 answers
32 views

If radio button is checked remove border of parent div [duplicate]

I have a problem, I have to remove a 1px solid red border only when one of my inputs is checked. When my radio buttons are unchecked the border must remain. I would be fine with a solution with css or ...
Gennaro Luca Scognamiglio's user avatar
-1 votes
0 answers
41 views

HTML Select option width issue

if any of option has a long text , its coming like this how to give ellipsis here, which will take max width of the select bar. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-...
Sounak Das's user avatar
-1 votes
0 answers
36 views

Data part extraction of a website using vba selenium code

Sub Test_2() Set MB = New Selenium.ChromeDriver MB.Start MB.Get "https://www.martinsprocket.com/view/products/product-search?Part_Number=60B12" MB.Wait 10000 Dim specs As Selenium....
jaga jagga's user avatar
-1 votes
0 answers
17 views

How to Scrape data for sub-sites having different Xpath or CSS Selector in Selenium (and no ID as well)

I am scrapping this site using selenium in py. The website has sub-websites, where I have to click each of the sub-sites and scrape the information. (Pic Attached Below) Now there are many ...
Sai Anand's user avatar
0 votes
2 answers
39 views

capture input of element when toggled with radio button and display outside of parent with only html and css

Im not sure if im designing my solution correctly but essentially I have two radio inputs and when i select an option it displays the anchor tag .tick which is fine. now I have an achor tag called ....
Mark Evans's user avatar
0 votes
0 answers
16 views

Need help to extract the visible text in a Web Page

I'm new to WebDriverIO. I'm now dealing with an issue in which a locator contains the CSS property. text-overflow: ellipsis; This allows the text in the locator to fit inside the width. As an example: ...
Vinoth Kumar's user avatar
0 votes
1 answer
46 views

Problem with obtaining title of a tooltip in selenium webdriver

I am trying to find a way to obtain a title of a tooltip displayed on mouse over event on a page: https://demo.nopcommerce.com/nike-floral-roshe-customized-running-shoes This tooltip appears when ...
fotrenc's user avatar
  • 59
0 votes
1 answer
28 views

Extracting Price as a Variable Using Google Tag Manager from Specific Page Element

I'm aiming to retrieve the price value ($278.45) from a designated HTML element using Google Tag Manager and store it as a variable for further use. Target Element: <div class="sc-fbgIAx CmZAI ...
Carson Whitley's user avatar
0 votes
0 answers
21 views

Issues with some CSS Selectors when using Python GTK3

I am having some issues with getting some of my CSS Selectors to work with Python GTK3. Some of the expressions suggested at https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/ (...
Jeff H's user avatar
  • 935
0 votes
0 answers
24 views

How can I straighten the lines making up the arrows of this full screen button (and also reduce the excessive variable use)?

Here's my code so far: function toggleState(target) { target.classList.toggle("animate"); } :root { --btn-size: 15vmin; --btn-anim-len: 0.5s; --btn-anim-len-half: calc(0.5*var(--btn-...
TheDudeofDC's user avatar
0 votes
0 answers
23 views

how to automate calendar for date of birth by using show date picker in robot framework

I want to automate calendar for date of birth but don't know how to do so. kindly help. [Arguments] ${date_of_birth} Click Element id= xpath:/html/body/ion-modal/app-add-customer-popup/ion-...
reyansh yadav's user avatar
1 vote
1 answer
46 views

How to change currency in booking by selenium

I'm trying change currency on USD in booking.com website by Selenium but I got a little problem with "click" on USD sign. My code always set first Currency from list, which is EURO. I see ...
Adii's user avatar
  • 61
-1 votes
1 answer
30 views

what is the right selector for extracting the links of products?

I want to scrape the product links (href) in this webpage. https://www.artfinder.com/editors-picks/theme/amazing-techniques/blurred-lines/#/ I am working with r and cannot figure out what is the right ...
mohsen0965's user avatar
-1 votes
1 answer
40 views

How to use css selector to select sibling of parents div [duplicate]

I'd like to select the label whenever the input field is valid or invalid. How do I achieve this? <div class="amplify-flex" style="flex-direction: column;"> <fieldset ...
Maurice's user avatar
  • 139
0 votes
1 answer
26 views

How to use `querySelector` to select an element whose label has a colon?

For example, we have this XML: <?xml version="1.0" encoding="UTF-8"?> <xml xmlns:media="http://search.yahoo.com/mrss/"> <media:content></media:...
Ulysses Zhan's user avatar
0 votes
2 answers
59 views

CSS: how to conditionally select the last X nth-last-of-type only when any of them has a class?

Using CSS only, I would like to select the last 4 elements, but only when any of them has the "selected" class. In the snippet you can see in the second row how i'd like it to work. let ...
Parduz's user avatar
  • 646
-1 votes
1 answer
24 views

How can I style a span tag within a h2 tag in Css

I am trying to create a simple website But it's not showing exactly what I want In my HTML I did not assign the span to any class or id. How can I do that? The h2 tag looks like this: <h2> ...
Tech girl's user avatar
0 votes
1 answer
71 views

Clicking on element with seleniumbase

I'm trying to click in a element with seleniumbase but its not happening as expected I tried following method but its not working for some reason: <code> driver.click('div[class="ovm-...
Marsango's user avatar
-2 votes
0 answers
21 views

CSS alignment messed up whenever HTML document is viewed on a different device?

I need my website's presentation and structure via css alignment to be consistent throughout all devices and not messed up from device to device? I followed Youtube tutorials and coding camps' ...
Francis Mike Nathan's user avatar
0 votes
2 answers
64 views

Java + Selenium - Unable to Click Dropdown(Not a Select dropdown) and Select a Value from the drop down

In JAVA Selenium - I am not able to click the dropdown and select a value from it, this is not a select dropdown. This is a saleforce site. I have seen it working 1 in 10 executions but not getting it ...
Venkatram Ayyer's user avatar
-1 votes
1 answer
30 views

How to make a navigation menu sticked to the top, occupying the whole width and taking up space on top of the webpage?

Whatever I try, there is always a space on top which is a part of the html box as I understand. I tried to reset padding and margin using * but as soon as I make header position fixed it doesn't look ...
Oleg's user avatar
  • 3
0 votes
1 answer
38 views

Why am I getting “Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: is” when using “:first:is”

I am trying to select an empty form date element (first element) using jQuery 3.7.1 but I am constantly getting errors with this command and using this CSS selector. The error is this: Uncaught Error:...
Giacomo1968's user avatar
  • 25.9k
0 votes
0 answers
47 views

Styling every nth line of a paragraph with CSS

How can I style every nth line of a paragraph with css without manually adding linebreaks or inserting tags so that the line-breaking is still defined by the width of the container? Is there something ...
Carl J. Kurtz's user avatar
-1 votes
1 answer
36 views

Why won't justify-content: center move the h2 and #experience_content items to the center of the .experience box? [duplicate]

<html> <head> <style> .experience { display: flex; flex-direction: column; justify-content: center; } .experience h2 { } #experience_content { display: flex; ...
WideRule's user avatar
0 votes
1 answer
52 views

CSS variable override [duplicate]

I have a very simple codepen setup to try to outline what im trying to achieve. I want to have a default css variable set controlling the hue of the colours, but at an element level, i want to be able ...
Shannon Hochkins's user avatar
2 votes
1 answer
60 views

Native CSS nesting confusion

In the Using CSS Nesting guide on MDN, in the example section we have the following HTML structure: <div class="wrapper"> <article class="card"> <h2>Card 1&...
Eldar's user avatar
  • 23
0 votes
0 answers
50 views

Migrating Cypress "within" feature to Playwright

I'm migrating my tests from cypress to playwright. I have a content on a page that is used in different ways but contains the same elements. I could handle this situation very easily using "...
JDoe's user avatar
  • 81
0 votes
0 answers
21 views

How can I make element draggable except the button

I am using vue-draggable for my project. It is something similar like this. <draggable v-if="isOpen || (isOpen && isAllOpen)" v-model="...
Yellow rain coat's user avatar
6 votes
1 answer
297 views

Connecting Lines in a Single Elimination UI with an Odd Number of Players - react

I'm building a Single Elimination UI using React and CSS, and I've got an issue when trying to connect lines between players. I tried this way. drawn a line over it. but structure got failed. Here's ...
smack cherry's user avatar
0 votes
0 answers
31 views

Highlighting Elements Within Shadow DOMs - How to Achieve This Without Event Listeners?

I am working on a project where I need to highlight elements within both regular DOM and shadow DOM. Currently, I have a function that binds event listeners to elements within shadow DOMs, but I want ...
Demodev's user avatar
  • 94
0 votes
0 answers
69 views

How do I get my second media query to work?

Why can't second media query change the width property to 100% when the display changes below 600px? I want when opened on a screen below 600px the width property will be 100%. I tried it in w3s ...
arvine's user avatar
  • 11
0 votes
2 answers
56 views

How can I reverse flex direction for each row?

I'm trying to see if this is possible with flexbox. I'm trying to accomplish 2 things: Have div container width be 60% and another 40% (so only 2 items per row making 100%) Each row will reverse (so ...
Michael C.'s user avatar
0 votes
0 answers
24 views

Why is .patch:nth-last-of-type(x) not counting elements having only .patch class? [duplicate]

I’m trying to select the 3 last elements having the patch class inside a zone. There might be or not a trailing fourth element which is not a .patch, but it seems to interfere with the counting. ....
Miz's user avatar
  • 1

1
2 3 4 5
307