FAQ Database Discussion Community


Is it possible to add text to every image path on hover using CSS?

css,css-selectors
I'm wondering, I have alot of image on my website that behave depending on the class. I was wondering if it would be possible using CSS to do this for example. .willReactOnHover.class1{ background: url('../images/image1.png');} .willReactOnHover.class2{ background: url('../images/image2.png');} And then, on hover .willReactOnHover:hover{ background: /*Here, .class1 would be .image1-hover.png AND .class2...

Regarding the :nth-child and :nth-of-type selectors

html,css,html5,css3,css-selectors
Stumbled upon a problem that I can not figure out. An easy example of what I'm trying to do: Highlight in RED every occurrence of the first 'span' under the class .row, except for the very FIRST occurrence, which should be highlighted in YELLOW. .row span:nth-of-type(1) { background: red; }...

How to select 3rd 'a' tag in a list for RSpec test?

ruby-on-rails,rspec,css-selectors,click,rspec-rails
How do I select a link in a list to click on for an rspec acceptance test. The code for the view is (in html): %ul.exports %li.model .name Model 1 .control link_to 'Export', export_model_path(:model1) I've tried (page.find("a")[:href] = "/admin/export/users").click and the response is 'Capybara Ambiguous match'. I've also tried variations...

What CSS selector is this? [ui-view].ng-enter-active

css,css3,css-selectors
What CSS selector is the first part in square brackets? [ui-view].ng-enter-active {} It is not an attribute selector that would be this right? ui-view[content] {} ...

LESS CSS - Mixin Arguments and Nth-Child - without looping

css,css-selectors,arguments,less,less-mixins
I am trying to write a less argument that will associate with the id #p0x1. I would like to be able to write an argument like @ytrans = translateY(@argument * 2) then provide that argument value for each ID. #p0x1(@argument:3){@ytrans} However, I am unable to do this with the nth-child...

Element-relative CSS selectors

javascript,jquery,css-selectors,queryselectorall
Is there a way to shorten these types of lines by using CSS selectors and jQuery? $(element).parent('tr').parent('tbody').parent('table') $(element).children('tbody').children('tr').children('td') It is basically: "get me the direct parent/children if any" I need 100% equal selectors. UPDATE: closest('table) does not work: can return the element itself AND may find not direct parents find('td')...

:target behaviour but on :hover in CSS

css,css3,css-selectors
Consider the w3schools example of the :target selector: <!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } </style> </head> <body> <h1>This is a heading</h1> <p><a href="#news1">Jump to New content 1</a></p> <p><a href="#news2">Jump to New content 2</a></p> <p>Click on the links above and the :target selector...

CSS Selector-How to locate Parent Element

selenium,selenium-webdriver,css-selectors,webdriver
Is there any way to locate parent element in CSS Selector? i am using below code but i am not getting the parent element. WebElement we=dr.findElement(By.cssSelector("div[id='gf-BIG']:parent")); I know there is a way in Xapth but please let me know that how we can locate parent in CSS Selector. ...

How to hide hr inside the last li using css

html,css,css-selectors
I need to hide the <hr> inside the last <li> <div class="search-wrappper"> <ul> <li> <a href="#"> <h3>Headline</h3> <p class="ellipses">Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p> </a> <hr /> </li> <li> <a href="#"> <h3>Headline</h3> <p class="ellipses">Lorem ipsum dolor sit amet...

Partial grouping of a CSS selector

css,css-selectors
I can't seem to find an answer to this so either it's not possible or i'm not wording my searches correctly - i'm hoping someone on here can help? :) I have some HTML (UL in my example) who's grand-parent (div) occasionally has a sibling and occasionally doesn't. An example...

CSS - Differentiate between drop down select and list box select

html,css,css-selectors
Is there a way using CSS to target drop down (size='1') and list box (size='[2+]') elements seperatly other than by using classes or ids? Cross browser and IE6 :( compatibilty would be ideal. Thanks EDIT - Solution (IE 7 + with !DOCTYPE) Thanks To SW4 select{ /*All select elements (Drop...

How to Find CSS Selector

css,css-selectors
I am having trouble targeting a specific element. I'm trying to change the background color of a widget. My problem is this widget is used in a few spots on the site, so if I change something via CSS, it changes in all the widgets. I've been trying different selector...

Is it possible to make querySelectorAll live like getElementsByTagName?

javascript,dom,css-selectors,getelementsbytagname,queryselectorall
getElementsByTagName() has 2 great features: it is fast and it is live. But what if I want to get p strong. Of course I could refine a selection using getElementsByTagName() again but wouldn't I loose the live effect for the new p tags? Is there a way to turn querySelectorAll...

CSS pattern that matches when style is NOT present

html,css,css-selectors
I have a library (PrimeFaces) that adds a style to a <TH> when a column is sortable. But I want to apply my own style when a column is NOT sortable: i.e. when that style is NOT in the <TH> Is there a way to do a CSS selector for...

how to style html5 date input, first element focus/active

css,html5,date,input,css-selectors
I have a date input that I've styled but I can't remove a blue highlight. Here is a pen: http://codepen.io/pjrundle/pen/PqjKBZ <input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date"> ::-webkit-inner-spin-button { display: none; } ::-webkit-clear-button { display: none; -webkit-appearance: none; } ::-webkit-calendar-picker-indicator { opacity: 0; height: 14px; width: 80px; border: 1px...

Selecting nested lists

html,css,css-selectors
I have a navbar that contains a menu nested 3 times. So I have a div with id="navbar", which contains an ul, that has a li item with id="menu", that contains another ul, that contains more li items. Now I want to target every ul seperately, to add some JS...

Understanding the CSS child selector >

html,css-selectors
In my tests, styles for a div > ul rule are also applied to div ul li ul elements. Why is the > child selector not always enforced? I have a solution for this, but I want to understand why I need to use this solution. In CSS, I understand...

How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

css,css-selectors
I've three containers, like so container | + container | + container I want to minisize the middle container by applying class "minisized". However, this also minisizes the third container. Is it possible to target only the second container and not the third? I would like to add a class...

css :not() selector with selector list incoming

javascript,css,css-selectors
I have many css selectors and many selector exception, so I use :not to leave them out... example (just some selectors I don't need): [class*="-dashboard-"]:not([class$="-binding"]), [class*="-dashboard "]:not([class$="-binding"]), [class$="-dashboard"]:not([class$="-binding"]) But what I instead would prefer is: ([class*="-dashboard-"],[class*="-dashboard "],[class$="-dashboard"]):not([class*="-binding-"],[class*="-binding "],[class$="-binding"]) or something else, that ist shorter than the working one and easier...

css - parent :before pseudoelement with child alt attribute as content

css,css-selectors,pseudo-element
A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists. Additionally, when there are no lists present within the div in question, nothing should appear whatsoever....

How to get all direct(immediate) rows from WebElement Table

selenium,xpath,css-selectors
From the below table I need immediate row elements using Xpath or "css-selector" or Selenium API :- element.findelements. Please help. <table id ="Main"> <tbody> <tr id="row_1"> <tr id="row_1_1"> <tr id="row_1_1_1"> </tr> </tr> </tr> <tr id="row_2"> </tr> <tr id="row_3"> <tr id="row_3_1"> </tr> </tr> </tbody> </table> Expected Output:- [<tr id="row_1">,<tr id="row_2">,<tr id="row_3">]...

find element by css property that is not explicitly set

javascript,css-selectors,phantomjs,karma-jasmine
In order to disable chrome autofill I have added invisible user/password fields to my input forms: <!-- fake fields are a workaround for chrome autofill getting the wrong fields --> <input style="display:none" type="text" name="fakeusernameremembered"/> <input style="display:none" type="password" name="fakepasswordremembered"/> The problem is that this breaks tests like: expect(element.find('input').length).toBe(10); There are 12...

how to hide first and last element from the three same element

html,css,css-selectors
I have three div with the same class name, I want to hide the first and last div. My code: <div class="clsname">div1</div> <div class="clsname">div2</div> <div class="clsname">div3</div> Now i want to hide div1 and div3. In fact i want this output in browser: div2 How can i do that ? For...

The difference between quoted and unquoted attribute selector in CSS

css,performance,css-selectors
I was wondering what is the difference between quoted and unquoted attributes in css selectors and does that have any effect on performance. input[type="text"] / input[type=text] Thanks in advance...

Wrong css “>” selectors (by me) [duplicate]

css,css-selectors
This question already has an answer here: Why doesn't table > tr > td work when using the child selector? 2 answers I am trying to design a chess board with css3, but it seems like my selectors are wrong. Here is my JsFiddle So why can't I see...

Does * selector affect performance seriously?

css,performance,css-selectors
Sometimes i find very usefull doing this: .someclass > *{} to select all the direct children of an object. Problem is that I read that selectors get evaluated from right to left so that is telling to get every html element from the begining and then filter. Can this cause...

Which of the two following selectors are better? [closed]

css,performance,css-selectors
Considering the following HTML: <ul> <li> <a ... For the same set of declarations, which one of these two rule sets would be more performant? if there is a difference after all ul { font-size: 1.25rem } ul a { font-size: 1.25rem } Could be the first one?...

Change the 'option' color with the attribute 'disabled'

css,css-selectors
I would like to change the font color of an <option> with the attribute disabled. I have tried this option:disabled { color: red } and this option[disabled] { color: red } Both work but the color only gets red when you CLICK on the select field. By default it is...

CSS selector to bold only labels without child elements

html,css,css-selectors
I have a basic html form where label tags are used to define field names and where label tags are used around checkboxes so that a user clicking on the text next to a checkbox also selects the checkbox. <label>Valid?</label> <label> <input type="checkbox" /> Yes </label> What CSS is the...

:nth-child(3n):after cleafix not working in CSS

css,css-selectors,clearfix
Hello there I have tried the following which I think should be valid CSS and it does not work (tested with Google Chrome). <ul> <li><a href="...">bla</a></li> <li><a href="...">bla</a></li> <li><a href="...">bla</a></li> <li><a href="...">bla</a></li> <li><a href="...">bla</a></li> </ul> The CSS: ul li { float:left; } ul li:nth-child(3):after { content:""; display:table; clear:both; } The...

How to select parents sibling with CSS?

css,css3,css-selectors
When I hover on the first <li>, I want to change the background-color of the .arrow-tip class. Can you help me find the correct CSS rule? HTML: <nav> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </nav> <div class="arrow-tip">A triangle tip for the nav menu</div> CSS: nav > ul > li:nth-child(1):hover ~...

How can I add additional information to an attribute selector via nesting in Sass?

css,sass,css-selectors
I'm trying to avoid "class'itis" and leverage SASS nesting to achieve the following CSS output: a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules} .utility-button-one {//some unique css rules} .utility-button-two {//some unique css rules} This is what i'd like to be able to do (what i've currently tried): a[class^="utility-button"], a[class*=" utility-button"]...

Select a class using CSS based on whether or not it has any siblings that share the same class

html,css,css-selectors
So, I'm working in a design framework that makes heavy use of line-height for vertical centering. I currently have an absolutely positioned HTML element with vertically centered text/content inside, and when I add another identical element as a sibling, I'd like it to occupy the same space, but change the...

Select the first-of-type div in a list that all have a data-attribute for the state it's associated with

css,jquery-selectors,css-selectors
I have a dynamically created list of elements that are job's in a particular state. There can be more then one job per state and I'm trying to select the first one of each state, but not just the first one in this huge list. For example: <section class="careers"> <div...

CSS selector to choose second item after a hyphen

css,css-selectors
The CSS selector [attr|=value] is designed to select items which are exactly "value" or which begin with "value-". This was originally intended to allow selection of all languages regardless of dialect, such as "en-au", "en-ca", "en-gb", "en-us". What I'm looking for is a selector for an item which is exactly...

How can I style only certain columns in a div? [duplicate]

html,css,css-selectors
This question already has an answer here: Select every Nth element in CSS 3 answers I have a series of divs inside an overall container: <div class="positionDivs"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <!--this goes on for a unspecified number of times--> </div> This displays as...

Specify an attribute value using the parent selector in LESS/SCSS?

sass,css-selectors,less
Is is possible to use the parent selector in LESS/SCSS to specify a value for a parent attribute selector? I want the following output: [some-attribute] { font-weight: normal; } [some-attribute~="bold"] { font-weight: bold; } Given this (obviously incorrect) example: [some-attribute] { font-weight: normal; &~="bold" { font-weight: bold; } } Is...

CSS after selector in nav

css,css-selectors
I try use after selector in my CSS code, but is not well centered. I use Bootstrap. When I set after selector on li not a, content moves down. This is my HTML code: <nav class="navbar"> <div class="row"> <div class="col-md-2"> <img src="/images/logo3.png" class="img-responsive"> </div> <div class="col-md-5"> <ul class="nav navbar-nav"> <li><a...

Can I select css parent element? [duplicate]

html,checkbox,css-selectors
This question already has an answer here: Is there a CSS parent selector? 17 answers I'm trying to create product selection by css using checkbox. My codes are here .vfb-checkbox{ width:180px; height:130px; background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg'); } /* checkboxes */ .vfb-checkbox label { cursor: pointer; display: block; position: relative; width:100%; height:100%; }...

Selecting one of elements in a pair by pure CSS

html,css,css-selectors
Is there a way to select one element, immediately following (or preceding) other by pure CSS? Foe example, hide one of <br> in a <br><br> pair: <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p>...

Cant get “nth-last-child” to work

css,css-selectors
Trying to apply styles to all of the elements except the last one. But it doesn't work. Tried all this: ul li:not(ul li:nth-last-child) ul li:not(nth-last-child) ul li:not(:nth-last-child) ul { list-style: none; margin: 0; float: left; width: 100%; text-align: center; } ul li { height: 54px; width: 54px; border-radius: 60px; }...

“multi level” adjacent sibling selector

css,css-selectors
I have the following html (that is generated as is, so I could only alter it with JS): <table> <tr> <td class="header"> <h3>title 1</h3> </td> </tr> <tr class="field_value"> <td></td> </tr> <tr class="field_value"> <td></td> </tr> <tr> <td class="header"> <h3>title 2</h3> </td> </tr> <tr class="field_value"> <td></td> </tr> .... I need to target...

CSS3 Nth Child ordering

css3,css-selectors
I am looking to target elements using nth-child, there are 3 colours (grey-1, grey-2 and grey-3). On the fourth element, I want the colours to loop e.g. Grey-1 Grey-2 Grey-3 Grey-1 Grey-2 Grey-3 What is the most efficient way of doing this, I have the option of using jQuery but...

How do I apply a style to every nth set of size m?

css,css-selectors
In css, you can apply a style to every nth item by using :nth-child: li:nth-child(3) { background: green; } This will make every 3rd row green. But what if I want to have my rows styled in a pattern of 3 white, 3 green, repeating? 1 2 3 [4][5][6] 7...

Is there a way I can specify the second inside an element?

html,css,css-selectors
I have: <label for="modalProblemLocator"> <span>Locator</span> <span>xxx</span> </label> <label for="modalProblemLocator"> <span>Locator</span> </label> If there are two <span> elements inside I would like the second to be red. Is there a way I can specify a selector for the 2nd <span> only? What I tried was: .inputWithLabel { & > label span:last-child...

CSS :not() with [attribute*=value] selector not works properly

css,html5,css3,attributes,css-selectors
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work. CSS: .nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) { display: table-cell; } .nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {...

How to show all siblings on :hover in pure CSS

html,css,css-selectors
Need to select all sibling <li> elements on hover. Tried accepted answer here but it is not working. JSFiddle here .menu { margin: 0; padding: 0; list-style: none; overflow: hidden;; background-color: #777; } .menu li { float: none; display: none; } .menu li a { display: block; padding: 10px 20px...

Find element by class name

python,parsing,selenium,selenium-webdriver,css-selectors
I'm trying to find one tag using we.find_element_by_css_selector('p.p1.transfer strong.ng-binding').text The problem is that there is sometimes a 'strong' tag before the tag I'm searching for which is very similar but it's class is: class="ng-binding ng-hide" instead of class="ng-binding". But when I try to find it it finds the first tag....

SASS vs. CSS attributes including concatenated classes

css,sass,css-selectors
here is a sample of some CSS that is compiled by SASS: #affinity-page.header.slide.hasSubnav { height: 50px; } the question I have is, is the multiple concatenated periods a SASS element or a native CSS selector method? If it's native CSS I'm wondering, does it mean, "Having this id, AND this...

Count DOM elements with CasperJS' evaluate failed

javascript,css-selectors,casperjs
I've just got trouble with CasperJS. I need to count table rows, since there are many tables that contain same information structure (lets say user table) So I do some casperjs evaluate code like this var table_rows1 = casper.evaluate(function(it){ return jQuery("#dResult > div:nth-child("+1+") > div > div:nth-child(4) > div:nth-child("+it+") >...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class
Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

CSS last-child not working in menu

html,css,wordpress,css3,css-selectors
I have a site under development and am trying to use the :last-child command to remove the right border on my navigation menu here: http://new.solacetree.org/ .main-navigation .main-nav ul li a { border-right: 1px solid #fff; } .main-navigation .main-nav ul li a:last-child { border-right: 0 none; } I also tried the...

Can I activate all child hover states at the same time?

html,css,hyperlink,css-selectors,hover
I hope someone can help. I am trying to create a link with a background image in one div and and text in another. I am trying to create hover states for each which activate as soon as the parent is hovered over, which currently i'm having difficulty with. So...

Alternate table row color using CSS, individual cells get colored not the even rows

html,css,table,css-selectors,background-color
somehow I can't figure out the following: Alternate table row color using CSS? If I use the code suggested in the aforementioned topic the even cells get colored (the first, third and fifth. There is a total of 5 cells in a row). It doesn't matter if I use 'even'...

Is a dynamic pseudo-class evaluated before the rest of the selector?

css,performance,css-selectors,pseudo-class
As far as I know CSS selectors get evaluated from right to left, so body div * would select every item, than look which has a parent of type div and of those which has a parent of type body. What I am uncertain about is how dynamic pseudo-classes get...

CSS nth-child does not work

css,css-selectors
I know this question has been asked many times but I can't figure out the problem anyway, so this is my html: <table class="UMLTable"> <tr> <th>Table<th> </tr> <tr> <td>Attribute 1<td> </tr> <tr> <td>Attribute 1<td> </tr> <tr> <td>Attribute 1<td> </tr> </tr> </table> So why this line does not work: .UMLTable td:nth-child(even){...

Defining selectors to apply to the other styles

css,css3,css-selectors,less,extend
I am fairly new to Less. There is some dynamic content coming from external source which is part of #left(id selector) tag. Here is my Less file: //can i define anything like this in `less` @not-empty: #left:not(:empty); #left { background-color: red; &:not(:empty) { font-size: 20px; background-color: green; } } #right...

Css selectors help needed

css,css-selectors
I have this composition : <div class="theclass1"> <input type="checkbox" id ="1"> <div> <div> <div> <label for="1">bla bla</label> </div> </div> <input type="checkbox" id ="yy"> <label for ="yy">other</label> </div> <div class="theclass2"> <input type="checkbox" id ="2"> <div> <div> <div> <label for="2">bla bla</label> </div> </div> <input type="checkbox" id ="xx"> <label for...

How can I use document.querySelector to select this class name with a space in it?

javascript,html,css-selectors
<a href="javascript:void(0)" class="PrmryBtnMed" id = "VERYLONGTEXT" onclick="$(this).parents('form').submit(); return false;"><span>Dispatch to this address</span></a> I have been using var inPage = document.documentElement.innerHTML.indexOf('text to search') > 0, el = document.querySelector(".PrmryBtnMed"); if (inPage && el) el.click(); But now, the class name has changed: there’s a space and some new text in the class name:...

Can CSS identifiers begin with two hyphens?

css,css3,firefox,css-selectors,identifier
CSS 2.1 defines identifiers as In CSS, identifiers can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters...

How to determine if a specific input exists using CasperJS

javascript,css-selectors,casperjs
My Html <input name="SUBMIT-chn:$INTERNAL_password.pss" title="Select" class="image selectIcon" type="image" alt="Select" src="docs/pics/select.png"> I am trying to use CasperJS to know if this exists and if it does then "Click" it? var casper = require('casper').create(); var site = 'http://internalsite/username=abc'; var exists; casper.start(site, function() { exists = this.evaluate(function() { return __utils__.exists('image selectIcon'); }); });...

:nth-of-type selector overrides all other CSS selectors

html,css,css3,css-selectors,css-specificity
I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority. I have the following CSS: table { border: 1px solid black; } tr:nth-child(odd) { background-color: red; } tr td:nth-of-type(even) { background-color: blue; } td...

Select the only Element with no class or ID

html,css,css-selectors
I've seen both this and this question, but they're both Javascript-oriented. I'm looking to select the only div which has no ID or Class. Example: <body> <div class="X" ... /> <div class="Z" ... /> ... <div class="Y" ... /> <div>Select me</div> <div id="footnote" ... /> <!-- Notice I have no...

CSS Pseudo Class Selection not working

html,css,css-selectors,pseudo-class
I have the following HTML structure: <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li><a id="c" href="#">This one</a></li> <li class="active"><span>Not this</span></li> </ol> I want to select #c via CSS. I have tried: ol > li:not(.active):last-child > a { border: 1px solid green; } As I understand it li:not(.active) selects...

CasperJS/SpookyJS css selector is existing and not-existing

javascript,css-selectors,web-scraping,phantomjs,spookyjs
I have a strange problem during screen scraping with spookyjs / capserjs. I want to catch information from the following website: 'https://www.rwe-smarthome.de/is-bin/INTERSHOP.enfinity/WFS/RWEEffizienz-SmartHome-Site/de_DE/-/EUR/ViewApplication-DisplayWelcomePage'. Because the site contains more than one page of products I want to open the other sites too. Normally one could use this.click(selector, function() {}); to achieve this....

hover div to show another div

html,css,css-selectors
Any idea how to get this to work? CSS: .otherDiv { opacity: 0; } .innerDiv:hover + .otherDiv { opacity: 1; } HTML <div id="container"> <div class="outerDiv"> <div class="innerDiv"> <h4>Show content</h4> </div> </div> <div class="otherDiv"> <p>Hello World</p> </div> </div> Basically I want otherDiv to show only if you hover over innerDiv....

h1 - Select second won't work

css,css-selectors
I am having some troubles selecting the second h1. It works great if I try to select the first one, but the second one won't work. Could you take a look at it? .sidemal h1:nth-child(2) { margin-top: 0px; } I have tried to use !important, but didn't work. Any ideas?...

set first a-tag on bold with css

css,css-selectors,bold
i have a fixed html structure where i would like to set bold only the first a href-Tag in the "categories" class In my Example Code i like to seht this links bold: Zum Kleben Zum Heften Zum Auf- & Abhängen Here is my html code: <div class="content-box-main-inner clearfix"> <div...

A CSS selector or xpath to iterate over rows with specific attributes

html,xpath,css-selectors
Imagine I am given a table like this: <table> <tr><td>A</td></tr> <tr><td><a href="#">B</a></td></tr> <tr><td><a href="#">C</a></td></tr> <tr><td>D</td></tr> <tr><td><a href="#">E</a></td></tr> <tr><td>B</td></tr> </table> I'd like to construct a CSS selector (preferred) or an XPath (accepted) that picks out the n'th row that contains an a anchor,...

Proper CSS syntax for assigning style attributes to a pseudo-class for multiple classes'?

css,css-selectors,placeholder,pseudo-class
I am trying to set the color (font-color) attribute for the placholder pseudo class for a multiple classes of inputs. (So I want all inputs with class .red-va or .blue-va to have placeholder text of a given color) I can (and have) done this: .red-va::-webkit-input-placeholder { color: white; } .red-va:-moz-placeholder...

Style select::-ms-expand when disabled

html,css,css3,internet-explorer,css-selectors
How do I change the background colour of select::-ms-expand when it's disabled? select::-ms-expand{ background: #f60; } ...

Styling ul with first-child

css,css-selectors,html-lists
I'm sure this shouldn't be difficult to solve but I can't get my styling for a ul to work (trying different things, it either works for one, or none at all) and I'm about to tear my hair out. What have I missed? https://jsfiddle.net/5cuuq8rq/ HTML: <ul class="nav"> <li><a href="?page=home">Home</a></li> <li><a...

Xpath targeting starting from CSS

html,xpath,css-selectors
I'd like to target in XPath (to be used in xmlImport for Google Spreadsheets) the element that in CSS would be .forum-table tr:nth-of-type(1) .forum-number-topics: <table class="forum-table forum-table-forums"> <thead class="forum-header"> <tr> <th class="forum-icon">&nbsp;</th> <th class="forum-name">Forum</th> <th class="forum-topics">Topics</th> <th class="forum-posts">Posts</th> <th class="forum-last-post">Last post</th> </tr> </thead>...

Selecting first-child anchor element in an ul [duplicate]

html,css,css-selectors
This question already has an answer here: Target the first and last anchor in an unordered list's list item 3 answers Hi I would like to select a first-child anchor element within a ul li element so that the Anchor "All" will be selected. Code: <header> <h2>Clear thinking at...

Difficulty clicking an anchor tag using href as locator

java,selenium,css-selectors,type-mismatch
How to locate identifiers in Selenium for the following line of code? <a href="loginPage" class="loginBtn" data-toggle="modal" data-target="rnr-loginPanel">Login</a> I have tried: driver.findElement(By.xpath("//a [contains ( @href = 'loginPage' )]")).click(); but it is not working for me....

CSS - Understanding child selectors [duplicate]

css,css-selectors
This question already has an answer here: CSS Child vs Descendant selectors 6 answers could anyone explain the difference between these two? p a { color: red; } p > a { color: red; } Thanks....

How to match a particular tag through css selectors where the class attribute contains spaces?

python,html,css-selectors,beautifulsoup,html-parsing
I want to select a table tag which has the value of class attribute as: drug-table data-table table table-condensed table-bordered So I tried the below code: for i in soup.select('table[class="drug-table data-table table table-condensed table-bordered"]'): print(i) But it fails to work: ValueError: Unsupported or invalid CSS selector: "table[class="drug-table" spaces in the...

Make text not wrap around icon in :before pseudoelement?

css,css-selectors,icons,pseudo-element
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance. Here is a link to my example: http://jsbin.com/yosevagaqa/1/edit?html,css,output If you resize the window so that the...

showing exception when selecting the cssselection in selenium

java,selenium,selenium-webdriver,css-selectors
<h3 class="menuheader expandable " headerindex="1h"><span class="accordprefix"></span> <h3 class="menuheader expandable " headerindex="2h"><span class="accordprefix"></span> <h3 class="menuheader expandable " headerindex="3h"><span class="accordprefix"></span> Our application is having the above headers. Each header is having the headerindex as an unique value to identify. I have used the below code: WebElement Tab_selection =...

Mechanize search unable to find CSS selector (it's definitely present)

ruby,css-selectors,nokogiri,mechanize
I have a long CSS selector that works perfectly fine when actually used in CSS, jQuery etc. But this very same selector will not work on a Mechanize::Page object - it simply returns an empty array. The selector targets a paragraph and in my other case a header1. I also...

Pass pseudo element selector as variable in SASS [duplicate]

css,sass,css-selectors
This question already has an answer here: Can I use variables for selectors? 3 answers I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin @mixin pseudoawesome($fa-symbol, $pseudo) { &$pseudo { // <-- here is the error content:...

Why can't I use the standard CSS annotation using the '#' symbol to grab elements with IDs on Selenium Webdriver, using the @FindBy annotation?

selenium,css-selectors,webdriver
Given an element on a web page that has an id: id="j_idt74:addNewTypeBtn" I'm using the '@findBy' annotation way of grabbing web page elements. Using: @FindBy(how=How.CSS, using="input#j_idt74:addNewTypeBtn") WebElement mAddButton; Gives an error: 'The given selector input#j_idt74:addNewTypeBtn is either invalid or does not result in a WebElement. The following error occurred: InvalidSelectorError:...

CSS Selector applied to HTML Page body element

css,html5,css3,css-selectors,document-body
I have 4 different pages (Page A, B, C, D) and css code body{ margin-top:50px; } lets say if I want page B to have a different margin (margin-top:20px;) then how do I place that in the css file. like maybe something like the following would be pretty cool. @pagename.body{...

Make hovering over a parent element only affect its own text, not child elements

html,css,css-selectors
Trying to do a very simple effect. I want only the brackets to become red when you hover over the h1. The span should stay black. My HTML: <h1>{ <span>js</span> }</h1> My CSS: h1 span:hover { /* make the color of just the brackets red here */ } And here...

nth-child selector not working with Wordpress theme

html,css,wordpress,css-selectors
My goal here is to have each of the boxes (which are testimonial boxes on the live site) have a different color background. Since it's a Wordpress site, I can't go in and give each box a different id, so I'd like to use the nth-child() selector. I've tried to...

nth-child() selector working only on select few elements [duplicate]

css,css-selectors
This question already has an answer here: CSS selector for first element with class 7 answers hey guys i have the following markup :: <div class="heading-container"> <p class="stroke">Who we</p> <h2 class="section-title extreme-bold">Contact us</h2> <p class="stroke"></p> </div> now i can select the 1st .stroke using the following selector : .heading-container...

Looking for a css selector that selects all childs after nth child

css,css-selectors
Is there any css selector available that selects all childs AFTER a specific child? For instance, I have a parent that has 10 child elements. I want to hide all child elements coming after the 4th child. Is there any selector that lets me select all childs after the 4th...

Set changed properties to spans

html,css,css-selectors
I have 20 spans on my page and I changed style of this spans but I don't want to apply to one of them in a div. I want set this span property to all spans except span in div with id="no" while this span keeps the default css. How...

Cannot change style with :nth-of-type(n)

html,css3,css-selectors
I have a problem with the pseudo class :nth-of-type(n). I need to change the background-color of .aside_box_content 1,2,3,4... I tried to use the pseudo class when divs are not nested in other divs and it works, so there's an error somewhere. .aside_box_content { height: 130px; overflow: hidden; } .aside_box_content:nth-of-type(3) {...

What this abbr and acronym selectors address?

css,css-selectors
I am looking source code for one of the Zen garden projects and I found selectors which I haven't seen before: abbr[title], acronym[title] { border-bottom-width: 0; } What they trying to address? What the purpose of them? ...

!important overriden by a class of child element

html,css,css-selectors,css-specificity
I have a very bad CSS rule (high specifity, use of !important) which sets color of text in a paragraph: #wrapper .article .text { color: green !important; } Then I put a simple span element in that paragraph and set color of the span text via simple class: .black {...

Css sibling (~) selector not working on checked property

css,html5,css3,css-selectors
Please take a look here, menu from left side should slide in and out on checkbox checked property, but my css is not working, can anyone help me please. In my code menu is currently set to left:-240px, because it should be slide in to left:0 on checkbox checked. my...

Select the first child of type

css,css-selectors
In this FIDDLE who can i select the first child if i have other child <div class="root"> <div>5</div> <div class="child">1</div> // i want this one </div> <div class="root"> <div class="child">2</div> </div> <div class="root"> <div class="child">3</div> </div> I try this css below but it dosen't work .root:first-of-type .child:first-of-type { color: red;...

Selector for the 2nd child of a child dvi

css,css-selectors
Is it possible to select the 2nd div of a child div? for example <div class="footer-widgets"> <div class="row"> <div class="footer1"></div> <div class="footer2"></div> <div class="footer3"></div> </div> </div> I tried something like .footer-widgets .row:nth-child(2) { display:none } to no avail...

Overriding CSS Reset with the Univeral Selector

css,css-selectors,css-reset
I have a reset (Eric Meyer's Reset) which sets the font, then I load my stylesheet on top of this, in which I want to set the font globally using the universal selector But although in my SASS the universal selector is loaded after the reset, the reset is taking...

Entering text into texbox after label

java,selenium,xpath,selenium-webdriver,css-selectors
I have an auto generated class id for a class "FormFieldContainer". I want to enter text into the Text Box_13 (also auto generated ID). The only consistent value in this scheme is a preceding label "Broker Code". How can I enter text into the text box by using the label...

CSS Locator with contains() InvalidSelectorException using Selenium WebDriver

java,selenium,selenium-webdriver,css-selectors
I am learning Selenium Webdriver and trying to write a simple test script. The intent is to get the About Google link on Gmail page so as to practice CSS locators. Here is the code: import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class GoogleSearch { public static void...

CSS or jQuery selctor? [closed]

jquery,html,css,jquery-selectors,css-selectors
Let's say there is the following HTML: <div id="test"> <span class="testSpan"></span> </div> There are two ways of selecting the span inside the #test div (I know I can select the span directly but this is not the point of the question): $('#test > .testSpan'); and $('#test').find('.testSpan'); Which of these ways...

How can I target only visible objects with nth-child?

jquery,css,css-selectors
I have 5 items, and a button above them to inform how many items will be displayed. For each item I have a different background image. The problem is that when a person hits an item, that item will be removed and another item will be appended with jQuery and...

Setting different margin to the li first child based on the number of list elements [duplicate]

html,css,css-selectors,siblings
This question already has an answer here: Can CSS detect the number of children an element has? 7 answers I'm trying to set a different CSS margin value to the first element of LI in UL depending on the number of LI elements. i.e <ul> <li> (margin: 20%) <li>...