I'm trying to create a CSS selector to be able to match the following entries (The page-top-menu):
Header menu - Menu 1
DE
#page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i28.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
Header menu - Menu 2
DE
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
As you can see, they all have this in common:
#page-top-menu > div > div.menu-wrapper > ul > li
however when I try to create the tigger based on the following selectors, nothing happens:
#page-top-menu > div > div.menu-wrapper > ul
#page-top-menu > div > div.menu-wrapper > ul > li
#page-top-menu > div > div.menu-wrapper > ul > li > *
If I use the full CSS selectors, the triggers work.
EDIT:
here is an example of one of the html elements (The highlighted part is the one the selector refers to):
Here is a snapshot of how the Tag and triggers are set up:
The problem is that your a element has child elements. And when you clicked element inside tag a it will fire click event, but click element will point to inner tag. You have two ways how to solve it:
1) Target all children elements in multi levels:
Type: Click - All Elements
CSS selector: #page-top-menu > div > div.menu-wrapper > ul > li *
2) Target only link:
Type: Click - Just Links
CSS selector: #page-top-menu > div > div.menu-wrapper > ul > li > a
Related
The thing is that I am working on a web scraping project to the edreams website, and the selector that refers to the next button changes continuously. A few days ago it was:
#search_results_table > div:nth-child(2) > div > div > div > div.d7a0553560 > div.b727170def > nav > div > div.f32a99c8d1.f78c3700d2 > button > span > svg
And now it is:
#search_results_table > div:nth-child(2) > div > div > div > div.d7a0553560 > div.a826ba81c4.fa71cba65b.fa2f36ad22.afd256fc79.d08f526e0d.ed11e24d01.ef9845d4b3.b727170def > nav > div > div.f32a99c8d1.f78c3700d2 > button
This is because a part of my code is:
driver.find_element(By.CSS_SELECTOR,'#search_results_table > div:nth-child(2) > div > div > div > div.d7a0553560 > div.b727170def > nav > div > div.f32a99c8d1.f78c3700d2 > button > span > svg').click()
time.sleep(10)
So, what happens is that every time I run the code that makes the web scraping to obtain the data, there are execution errors due to the change of the css selectors.
Any technique that you know can be useful?
Operating System: Windows
DocFX Version Used: 2.56.1.0
Template used: default
I was finding a way to change the default icon that shows up by the side of the toc items which is a "+" sign and which becomes a "-" sign once the list item is being expanded. I want it to be a right arrow which rotates into a down arrow while expanding the toc. I tried to modify the docfx.css file where this thing is mentioned like this (using glyphicon-menu-right):
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "\e258";
transition: transform .1s ease-in-out;
transform: rotate(0deg);
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "\e258";
}
But the icons dont show up in the docfx site. What should I do regarding the same?
I was able to change them successfully using lines 512-522 in default/styles/docfx.css:
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "x";
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "y";
}
In theory, you should be able to paste this code (with your adjustments) in default/styles/main.css, and it will override the default CSS in default/styles/docfx.css.
This did not work for me until I put main.css in a custom template, but that could be my particular configuration, or my lack of understanding:
From directory root, add: template/styles/main.css
In docfx.json, add template:
"template": [
"default",
"template"
],
Also, make sure any fonts are referenced in the head partial (which may also need to be added to template/partials/head.tmpl.partial).
I have three parent class elements that do the same thing. How can I write it out in one line.
Example:
I want to make the following into one line:
.parent1 li > div.example> a span {color:red;}
.parent2 li > div.example> a span {color:red;}
.parent3 li > div.example> a span {color:red;}
Goal:
.parent1 li, .parent2 li, .parent3 li > div.example > a span {color:red;}
Note: I have spent numerous time searching Google, Bing, and Stack Overflow for a solution, but not able to find because I am not sure what I am asking for....
There's no way to do that in such matter. You can only do something like this:
.parent1 li > div.example > a span,
.parent2 li > div.example > a span,
.parent3 li > div.example > a span {
color:red;
}
And remove unnecesary whitespace characters (don't do this, please, minifier will take care of this for you):
.parent1 li > div.example > a span, .parent2 li > div.example > a span, .parent3 li > div.example > a span { color:red; }
Also, note that having such generic selectors (and such complex) are not considered to be a good practice (specificity is hard to manage and you have little control over what exactly will get styled) if you can, just add a class to span elements that you want to be styled differently.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want when mouse hover (#cssmenu ul > li > ul > li ) Run blow code .Is it possible?
#cssmenu ul > li > ul > li > ul {
right: 1170px;
}
the selector you're looking for is:
#cssmenu ul > li > ul > li:hover > ul {
right: 1170px;
}
I'm not seeing all the CSS here but this seems like a bad idea in general since you're forcing every 3d level nested ul to be right: 1170px - if you have multiple of these menu structures they will all be on the same offset.
the :hover psuedo selector allows you to bind some CSS whenever you're hovering over an element.
for more information on :hover -> docs on mdn
Change this:
#cssmenu ul > li > ul > li > ul {
right: 1170px;
}
Into:
#cssmenu ul > li > ul > li:hover > ul {
right: 1170px;
}
and it should work.
As said by Sidney Liebrand
the :hover psuedo selector allows you to bind some CSS whenever you're hovering over an element.
for more information on :hover -> docs on mdn
Hope this helps!
I'm trying to add color to an element to match the default color of selected values in drop down lists. What is the color code for this? I can't seem to find any information online.
Use this type css
ul > li.active > a, ul > li > a:hover, ul > li > a:focus {
color:black; /*as you wish*/
}