I am working in web scraping. Now i am scraping one website and load into my website its working fine. But i need to add css into one div. This div does not contain any id or class.
But my main div contain class. How can i css for my inner div
For example:
<div class="ct-ui-spinner-animation">
<div>
<div> <!-- I Want to call css in this div-->
Sample
</div>
</div>
</div>
I am trying this ways
First try:
.ct-ui-spinner-animation > div
{
color:#fff !important;
}
Second try
.ct-ui-spinner-animation {
color:#fff !important;
}
But not applying css please guide me. How can i do it.
Your code was almost there.
You need to use two child selectors:
.ct-ui-spinner-animation > div > div
{
color:#fff !important;
}
Notice this will be applied for all the div elements which are the grandchildren of any element with the .ct-ui-spinner-animation class.
.ct-ui-spinner-animation > div > div
{
//Styles
}
Can be like this:
.ct-ui-spinner-animation > div > div{
color:#fff !important;
}
http://jsfiddle.net/CCnMe/
or
.ct-ui-spinner-animation div {
color:#fff !important;
}
http://jsfiddle.net/CCnMe/1/
You could give a look at the first-child CSS attribute
.ct-ui-spinner-animation:first-child {
color:#fff !important;
}
Setting a specific class or id for your div is (very) slightly better for the performance too.
Since it's two nodes down, you need to use "div" or * to in the middle.
.ct-ui-spinner-animation > * > div
/* or */
.ct-ui-spinner-animation > div > div
You need to do this to access the second child div:
.ct-ui-spinner-animation div div
{
//CSS goes here;
}
Related
I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}
Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.
Take out the + P
div:hover {
color: #fff;
}
In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE
there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.
You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}
Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
I have some section with three children (one <h1> and two <div>)
<section class="half">
<h1>Half</h1>
<div>
left half
</div>
<div>
right half
</div>
</section>
Then I am adding some styles to these blocks
section > h1 { ... }
section > div { ... }
I want to specify additional styles for the first <div> element in the section.
I can't write use just section > :first-child because first child in section is <h1>.
So how I should write?
That's what :nth-of-type is for:
section > div:nth-of-type(1) {
/* CSS properties go here... */
}
You're looking for :first-of-type
Working jsFiddle Demo
No doubt, Joseph Silber answer is great. But if you don't want to use CSS3, here is the trick:
section > div { background: red; }
section > div + div { background: transparent; }
First, you select all div elements and set your properties to it. Then, you select second div and later and
reset those properties for it.
Using only section > div:nth-of-type(1) { will select first div element where parent element is section, and hence I feel will be a loose selector, make it stricter by using
section.half > div:nth-of-type(1) { /* This will select 1st div element inside
* section having class .half
*/
/* Styles goes here */
}
Demo
You can also use first-of-type Demo
section.half > div:first-of-type {
/* Styles goes here */
}
I have a series of divs within a div. And I want to apply a css rule to all of them, and then another css rule to one of them using classes. Here is my current style:
.singleTiddler div { display:none; }
.singleTiddler div.singleTiddlervisible { display:block; }
The problem with Chrome is that it shows as using display:block in the inspector, but nothing shows up. The funny thing is that when I hover over it in the inspector, it is there but it has no height.
<div id="tiddlerDisplay" class="singleTiddler">
<div class="singleTiddlervisible">
<div>Hi</div><div>There</div><div>We</div>
<div>Like</div><div>Divs</div>
</div>
<div>
<div>Hi</div><div>There</div><div>We</div>
<div>Like</div><div>Divs</div>
</div>
<div>
<div>Hi</div><div>There</div><div>We</div>
<div>Like</div><div>Divs</div>
</div>
</div>
One major problem is that .singleTiddler div will apply to all divs at all levels. If there are divs underneath they will also be hidden. The override css will only apply to divs with the class singleTiddlervisible, thus only showing the root div. Use the child selector instead:
.singleTiddler > div { display:none; }
.singleTiddler > div.singleTiddlervisible { display:block; }
I have the following markup:
<a><div class="action_button">Log In</div></a>
I have styling on .action_button to make it bigger and have a background etc.
I also have styling on .action_button:hover to make it have a lighter background and an inset shadow when the user hovers on it.
How do I apply styling to the anchor tag that surrounds it, but only when it surrounds a .action_button div.
For example, this works:
a:hover {
text-decoration:none;
}
But it affects all links, I only want to affect those that surround the .action_button divs.
Why not just:
<a class="action_button"></a>
CSS:
.action_button {
text-decoration: none;
display: block;
/* other styles */
}
I don't see the point of having a DIV inside an A. If you want the anchor to be a block, just set display: block on that anchor directly.
a .action_button:hover{
text-decoration:none;
}
I would change the code around slightly - the <a> should be nested inside the <div>, as the div is a block element and the anchor tag is inline.
Then you can simply use the following:
<style>
.action_button a {text-decoration:underline; }
.action_button a:hover {text-decoration:none; }
</style>
I think you need to add a class to the "a" element that contains the button. you can't build a selector that works in the other direction.
You can use JQuery to add a class to every "a" that has a div with the class .action_button
$("a").has("div.action_button").addClass("myclass");
And then, obviously, use that class to select your "a" tags.
http://api.jquery.com/has/