FAQ Database Discussion Community
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...
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; }...
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...
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] {} ...
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...
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')...
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...
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. ...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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,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....
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">]...
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...
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...
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...
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...
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...
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?...
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...
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...
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...
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 ~...
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"]...
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...
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,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...
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...
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,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...
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%; }...
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>...
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; }...
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,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...
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...
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,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 {...
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...
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....
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...
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+") >...
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....
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...
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...
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'...
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,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){...
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,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...
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:...
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...
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'); }); });...
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...
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...
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...
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....
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....
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?...
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...
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,...
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...
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; } ...
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...
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"> </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>...
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...
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,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....
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...
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...
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 =...
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...
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:...
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,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{...
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...
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...
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...
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...
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...
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) {...
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? ...
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,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...
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;...
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...
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...
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...
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...
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...
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...
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>...