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.
15,323
questions
-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=&...
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 ...
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 ...
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 ...
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]="...
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=&...
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....
-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 ...
-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 ...
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 /&...
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 ...
-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 ...
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 ...
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 = ...
-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 ...
-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>...
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? ...
-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 ...
-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-...
-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....
-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 ...
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 ....
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:
...
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 ...
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 ...
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/ (...
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-...
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-...
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 ...
-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 ...
-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 ...
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:...
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 ...
-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> ...
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-...
-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' ...
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 ...
-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 ...
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:...
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 ...
-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;
...
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 ...
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&...
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 "...
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="...
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 ...
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 ...
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 ...
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 ...
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.
....