I want to apply following css to all hyperlinks except one of them, how do I apply this excception?
#top-toolbar .top-toolbar-tabs li a {...}
so all a tags inside li tags inside ul with class top-toolbar-tabs, will have this css except one of them. How?
Can you add additional classes to the a tags? If you can, just add a class style_it to the ones you want to style. Then your css is like this:
#top-toolbar .top-toolbar-tabs li a.style_it {...}
and HTML:
1
2
3
1 and 3 get your style and 2 does not.
Related
As the title says I'm trying to use "text-align: center;", but it isn't working on a specific block of text. It works on others, so I'm confused about that. I'm a complete noob lol (have been learning HTML and CSS for about 5 days), and decided to use my knowledge to get an easy 100 on the project. Bear with me, please. It's that's causing the issue.
CSS:
p4 {
text-align: center;
}
HTML:
<p4>
Over here, we have an economy consisting<br> of mostly fishing, shipbuilding, wheat<br> growing, and fur trapping. There are<br> many different economic opportunities.
</p4>
(Sorry, I didn't know what to really put, so you should probably check out the complete code, it's near the bottom: https://codepen.io/fishstick_god_/pen/ZEWjLyX)
text-align: center aligns the text to the center of the element, in your case the p4 element isn't the full width of the page so its only centering to the width of the content. Easy fix is to add display: block to your p4
p4 isn't a valid HTML tag, so the browser isn't clear how to display it. You should just use p as the tag for all instances of paragraphs. If you want to style one of those paragraphs specifically and differently from the other paragraphs, then also include a class attribute with the tag, like this in the HTML:
<p class="special">
Then, in the CSS, you create a class selector, like this
.special { text-align: center; }
You can place that same HTML class on any text-containing tag (like p, h1, li, etc.) and it will center those.
Note that you can't text-align: center; any tags that don't have a default display of block, like an a tag or an img tag. Also, you can't center structural tags (like div, header, nav, etc.) with text-align: center; because, well, they aren't text. There are other choices you can make in the CSS to center those.
text-align works on so-called block level elements. Like div or p. See, e.g., https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
p4 does not qualify. Try plain p:
<p style='text-align: center'>Hello World!</p>
I have made a table (with child rows) using jQuery plug in dataTables. I'm having trouble finding out how to apply a style to an individual column of cells (<td>)
I've made an edit to this existing fiddle as you can see I've made the text larger in column 2, but I also want to make the text larger (plus other styling) in column 4 and 5.
I put a class in line 114 in the CSS (this is the original css from dataTables) and this made the text bigger,
.sorting_1{
font-size: 29px;
line-height: 29px;
}
it didn't work for the other columns (as I assumed .sorting_2, .sorting_3 (etc) was the class to change it). When looking at the inspect panel you can see the <td> tag for the the changed cells all have the class of sorting_1, but the others don't and I'm not sure how to do that,
How would I do this?
Each row has the class of either even or odd so you could use nth-of-type to specify the td that you want to style and go from there. You would have to style both the even and odd column so you would have to specify both like so:
.even td:nth-of-type(4),
.odd td:nth-of-type(4){
background:red;
}
.even td:nth-of-type(5),
.odd td:nth-of-type(5){
font-size:20px;
}
Or you could specify it by the role attribute and use nth-of-type like so:
tr[role=row] td:nth-of-type(4){
background:red;
}
tr[role=row] td:nth-of-type(5){
font-size:20px;
}
I'd like to extract a list of divs (including their children, for further processing) which contain one or more <p class="c8"> child tags, using BeautifulSoup 4, but I haven't had any luck using the CSS selector syntax. Can I use find_all and a boolean function, or is there a better way?
There are different ways to approach the problem. One, is to locate all p elements having class="c8" and find the parent div element:
for p in soup.find_all("p", class_="c8"):
div = p.find_parent("div")
You can also write a function to find all div elements checking that there is a desired child:
def filter_div(elm):
return elm.name == "div" and elm.find("p", class_="c8")
for div in soup.find_all(filter_div):
# do smth with div
I have a dynamic CSS selector which turns out to be the only selector I could use in my robot framework test. I there any way to use this selector maybe using regex?
Here is my selector :
#weekend11063281 > a:nth-child(1)
Any solution to get rid of the dynamic id part after #weekend will be welcome!
Thanks
Below code should solve your problem
//HTML
<div id="weekend11063281">
<div>one</div>
<div>two</div>
</div>
//CSS
[id^='weekend'] > div:nth-child(1) {
color: red;
}
The only way that i can think of would be to have some other way of selecting the element(s) that you want. Lets say you have many elements with ids like #weekendxxxx and all of them are also using a name property weekend. You could now fetch all the weekend records in selenium by using the selector "name=weekend". Of course you would not need the quotes.
In our example above, we would get back more than one record. Remember, the name property is not unique in html. So this leaves you needing to do the nth child part that you had above.
var test ="<html><head><title>JSON Template</title><script type='text/javascript'>widgetbuilder.render({'displayParams':{'wtitle':'Columns','target':'wid1','classlist':{"+result+"},'displimit':'5'},'contentParams':{'channel':'news','category':'columns','wid':'widget1','entity':'Article','limit':'6'}});</script></head><body><div><ul id='wid1'></ul></div></body></html>";
$("#lightbox-panel").append(test);
The tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS
id
width
height
title
style