Is it possible to output a selector that isn't compliant with CSS standards? For example, I want to use this selector:
Button < Icon {}
But sass complains because it doesn't know what to do about the <. I'm thinking there has to be a way to output the selector without it being parsed by sass.
Thanks
sass eventually will be parsed to css and < is not valid css operator. This < fake operator would be an attempt to select a direct Parent from a given child, like > selects a direct child from given parent. CSS doesn't allow that. As its name says cascading style sheets, you go top from bottom, you can only select children, siblings at best, but no parents.
Preprocessors let you write easier styling with function, mixins, cleaner syntaxes, but dont allow you to violate css basic rules, you cant go around it.
Related
I have two links on a page that have the text 'London'. I want to choose the second one on the page, but I want to define the xpath in a way that it chooses by the parent div, but I want to use wildcard in case the link is moved.
So, the two xpaths are
//div[#id="first-id"]/div/div[2]/a[text()="London"]
//div[#id="second-id"]/div[2]/div[3]/div/a[text()="London"]
I want to use a wildcard and define the xpath within the parent div:
i.e. //div[#id="second-id"]/*/a[text="London"]
I already understand I can just use the full xpath and not have any wildcards, but I want to know if there's a way to do what I am proposing using xpath. I thought maybe contains() in some way would work but am not familiar enough with it.
To find the a element wherever it may appear within the div element, the descendant path is represented simply by //:
//div[#id="second-id"]//a[text="London"]
What are the advantages / disadvantages of the two different selectors?
Should I use one over the other?
I think it's primarily a matter of user preference.
To select the first child of all <p> elements, you'd do:
$("//p/*[1]") in Xpath
$$("p > *:first-child") in CSS
I prefer using Xpath, but YMMV.
Note that, internally, all CSS selectors are converted to Xpath. For example, the selector $$("#one") will be converted into $(".//*[id='one']").
Just a few notes:
indexing starts from 1 in XPath, so it's //p/*[1]
the CSS selectors in Tritium allow you to prefix a selector with >, as in $$("> p > :first-child"); this will be converted into a scoped search (i.e., ./p/*[1])
because CSS selectors are (currently) dynamically converted into XPath, there's a slight performance hit compared to using straight XPath
I want to avoid using xpath in my java selenium code but cannot figure out what the css equivalent to the code below would be
("xpath", "//div[#class='error'][not(contains(#style,'display: none'))]");
Does anyone know if there is a CSS equivalent to xpath not contains
You can't easily match against a compound attribute (i.e., style=) in CSS. The not part is easy - CSS3 has a :not(...) selector. You're going to have to find something else to identify the elements you want to exclude, and then use :not(...) to exclude them,
I'm running into a situation where IE8 appears to be dropping CSS selectors. I find this hard to believe, but I can't figure out what is happening.
In a .css file I have this declaration:
#srp tr.objectPath.hover td {
border-top:none;
}
However, when I inspect the file in IE8 through the built-in developer tools, the declaration is modified to this:
#srp TR.hover TD {
border-top:medium none;
}
I don't care about the change in case or the restatement of the rule, but dropping the '.objectPath' is a real problem because it targets the rule more broadly than I intend.
I note that this page is, and must stay in, Quirks mode.
Any ideas what is happening?
Thanks!
In Quirks Mode IE 8 renders the page and treats the DOM as IE 5.5 would render. That's the reason IE 8 in Quirks Mode ignores the multiple classes. It is not a bug in IE 8, if you want your page to be parsed and rendered properly, then you must have a proper DOCTYPE set to render the page in Standards Mode.
tr.objectPath.hover is not correct syntax if you are trying to use the hover pseudo-class. The correct syntax would be with a colon (ie tr.objectPath:hover). When the machine is reading your code, it reads objectPath as the tr's class name, but then when it gets to hover it gets rid of the old class name and replaces it with the hover class (whether there are actually any elements belonging to that class or not. Also, if this is the case, then I don't see what you are trying to do by referring to the child of an instance of :hover.
It you are in fact using hover as a class name (which I wouldn't recommend as it could be confusing to people reading your code) and you want the CSS to apply to the td children of a tr that is of both the objectPath and hover classes, you might consider just creating a new class for elements that are of both classes and using that instead (ie. #srp tr.newClass td).
EDIT: Looking further into the matter, it appears that this is (yet) a(nother) known bug in IE. I have tested it out in IETester and it seems to exist in all versions of IE. The only solution I could see on your end is very very messy:
First, it would require using JavaScript in your CSS since you don't have access to anything else. This is possible but very prone to bugs.
Second, it would require creating a getElementsByClass function in that JavaScript that could take multiple class names as parameters. This would be a very sizable chunk of code.
Finally, you would probably want to look into specifying this code to be used only by IE so that users of other browsers don't have to deal with any potential problems from all this stuff.
To clarify, I would NOT recommend doing this. Instead, I would suggest contacting someone who does have access to the HTML source code (assuming you are actually working in partnership with them) so that they could apply the much simpler fix of adding an objectPathhover class to the tr elements that belong to both classes or even to their td children.
It looks like you've got some incorrect syntax in your declaration, but its hard to tell exactly what you're doing. Are you trying to match to a hover state or is there a class actually called 'hover' ?
If going for the state, try:
#srp tr.objectPath:hover td {
...
}
If there is another class, you may need 2 separate declarations:
#srp tr.objectPath td {
...
}
#srp tr.hover td {
...
}
I'm trying to use CKEditor for a project and I found the need for bookmarks. The documentation says that the intrusive way to create bookmarks add span elements in the source. This is just fine with me and that is exactly what I would want it to do.
However, I can see in the source that the span elements are wrapped in p elements.
<p><span id="cke_bm_147S" style="display: none;"> </span> </p>
This creates problems for me with the way the text is displayed and mainly when trying to navigate the document.
I didn't find anything that even mentions the creation of these p elements. Could I have set something wrong? Is there a way to prevent these to be created?
Thank you
The span bookmark is an inline element so it cannot be the root element of the content. It is wrapped in a block element (which is by default a paragraph).
This behaviour depends on editor enterMode. If it is a default one - ENTER_P - you will have a p element as a wrapper. For ENTER_DIV you will have a div element. And for ENTER_BR there will be no wrapper which means it is the effect you would like to achieve.
Check this codepen for demo.
Please keep in mind that enterMode other that ENTER_P is not recommended due to some caveats. So maybe in your case it will be better to reconsider some different solutions instead of changing enterMode.