I am creating an industry section, like the one seen in https://squareup.com
I started using nth-of-type to call different images in the css. http://cssdeck.com/labs/full/vinttbws
However, it doesn't work when they are not all in the same parent. How can I get that to work?
Is there another way to accomplish this without having to make a div class for each industry with an image?
You're right, nth-of-type won't work because they don't share the same immediate parent.
I would highly recommend that you do what you were suggesting with making a new class for each one.
You could also give each parent a different id and then your css selector would just ask for the child:
#restaurant > a {
background-image:url(some/picture.jpg);
}
#retail > a {
background-image:url(some/other/picture.jpg);
}
I've made a bit of an example here(with colors instead of pictures): http://jsfiddle.net/mo9yazjm/
Edit: I made the change now to your CSSDeck example: http://cssdeck.com/labs/t4xnpzgf
You can do either with adding different CSS class to the HTML markup, or use only CSS3 nth type selector.
The first method is more verbose, because you have to modify and update your markup consistently with CSS. The latter is best in the matter of consistently and maintenance because you operate only on CSS.
CSS Class on Markup
HTML
<div class="some-class">Restaurant</div>
<div class="other-class">Retail</div>
<div class="some-other-class">Gym</div>
CSS
.some-class a {background-color: red;}
.other-class a {background-color: gold;}
.some-other-class a {background-color: aqua;}
Here is the live example.
CSS3 Only
Try add the style to the div with nth-of-type CSS3 selectors, and apply the style to the anchor:
.col-md-4:nth-of-type(1) a {
background-color: red;
}
Here is the working link. I use the background-color, you can use the background-image, or whaterver your layout need.
You can use the nth-of-type on the parent (.col-md-4:nth-of-type(1), etc)
:nth-of-type applies to child elements of the same parent, while you have your pictures in separate divs. You'll want something like this:
<div>
<a></a>
<a></a>
<a></a>
</div>
Related
I have recently observed the following change more and more often, people write div.class or div#id instead of just .class or #id.
What is the best way to target your classes in CSS And why?
If I remember correctly, div.class has the same result as .class.?
div.class will affect only to div elements, and is more specific than just using .class. So, if you write both, div.class and just .class in a div, the first one will win in preference.
But I think that is more elegant don't using it, if you don't have a good reason for that (you may want to apply something just to div elements with this class and not to any other).
What the best way is depends on what you want to achieve. Do you want to make sure that a block style can't be accidentally applied to an inline element? Or do you have complex CSS and performance is becoming an issue?
If you use div.class, then the style will only be applied to div with that class. <span class="class"> won't be affected. That means you can also define span.class to do something special for span or you can move common styles to a generic .class definition.
If you care about performance, here are a couple of links for you:
http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
(google for css performance)
.class will effect all the element we gave class name as class. If you use div.class, then the style will only be applied to div with that class. Other elements won't be affected. following fiddle explains more.
http://jsfiddle.net/wtcyvju2/
.class can be used for both div class and span also & div.class can be used when tag has that specific class
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 8 years ago.
I think I understand how IDs and classes are used (IDs for a single element on an HTML page, classes for many elements). But why bother with IDs in the first place; why not just use classes for everything?
It's much easier to target a particular element using script while using id.
ID's have heigh CSS specificity. If you have some elements having the same class and you need to apply particular styles to one of those elements, you can use an Id. Since id has more specificity, the css applied by class will be overridden…
For eg, consider the following scenario
HTML
<div class='box'></div>
<div class=' red box'></div>
<div id='red' class='box'></div>
<div class='box'></div>
<div class='box'></div>
CSS
.red{
background:red;
}
#red{
background:red;
}
.box{
width:50px;
height:50px;
background:dodgerblue;
margin:5px;
}
Here, only the element with id red will have red background as seen in this JSFiddle.
The css applied by class red will be overridden by css in box class since they have same specificity and .box appears later.
Side note: You can also override css using !important keyword but IMHO it's a bad practice. Assume you'v applied css properties having !important keyword for an element, and your colleague is trying to modify the same properties using something like javascript/JQuery - he'll be puzzled why those styles are not being applied - Even if script is injecting inline styles, it won't override the !important rules. But if you use a more specific selector, like an ID in our case, inline styles will take precedence as expected, which will avoid confusion and might save a bit of time
Because ID's are more important than classes.
If you make something like this:
.hello {
color: green;
}
#goodbye .hello{
color: red;
}
Every class hello will have color green, but when they are inside a div with id goodbye they all will be red.
So it is pretty important to use id's sometimes, because they are much stronger than classes.
At least two reasons:
It adds to improving your DOM structure.
Elements with IDs are easier to target with JavaScript.
I am having two dhx_scroll_cont div class, when i write css code as bellow it working for two classes. Now i want to write a css code that apply for first div call
.dhx_scroll_cont:before{
//some code here
}
Demo Fiddle
Simply use:
.dhx_scroll_cont:first-of-type:before{
//some code here
}
more on first-of-type
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
Update
According to the screenshot the OP posted the below should work:
.dhx_view_day_events .dhx_scroll_cont:first-of-type:before{
//some code here
}
Depending on the structure of your HTML the solution you require will change.
Would you be able to provide the HTML structure for us to work from?
Otherwise, you could:
Add another class to the div you want to change
By having <div class="dhx_scroll_cont"> you are only giving one targetable class. One way around this is having 2 classes separated by a space, such as:
<div class="dhx_scroll_cont OTHER_CLASS">
This will allow you to target the class OTHER_CLASS with the certain CSS values that you want effecting the first div.
Using :first-child or :first
:first-child and :first allow you to target the div that is the first child element of it's parent. For example:
<div class="surround">
<div class="dhx_scroll_cont">
</div>
<div class="dhx_scroll_cont">
</div>
</div>
dhx_scroll_cont:first-child {
CSS HERE
}
This will effect the first dhx_scroll_cont div.
As I said previously, if you can give some more information on the structure of your HTMl it would help us with your solution.
EDIT
Thanks for showing the HTML structure.
With that structure out of the methods that I have shown, adding another class to the first of the dhx_scroll_cont will allow you to specifically target that div, and not the other one.
This question already has answers here:
Complex CSS selector for parent of active child [duplicate]
(10 answers)
Closed 9 years ago.
I'm trying to give a style to all <div> with children and not to those with no children.
Or, give style to all, and give a different style to those with no children.
The structure is similar to this
<div>
<div>
<div>
<div>Don't style me</div>
<div>Don't style me</div>
</div>
<div>Don't style me</div>
<div>Don't style me</div>
<div>
<div>
<div>Don't style me</div>
</div>
</div>
</div>
</div>
CSS level 4 is being worked on, and will include selectors that can do what you're asking.
When it does become available, the syntax will look like this:
.myclass! div { ... }
This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)
If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/
However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.
So what options do you have?
The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
$('.myclass:has(div)');
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.
It can be done in 2 ways :-
1) Giving a specific class to the parent div and the child div will inherit the style.
2) Giving class to divs individually.
The better option would be implementing via the 1st option.
Use the ">" operator.
Some documentation
Like div > div {}
http://jsfiddle.net/9tLXP/
div {
padding: 10px;
background: red;
}
div > div {
padding: 10px;
background: blue;
}
div > div > div {
padding: 10px;
background: orange;
}
div > div > div > div {
padding: 10px;
background: green;
}
Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.
If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.
Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.
Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.
I have a series of elements with the class .tab-pane attached to it. They also each have their own unique ID. I am trying to select every .tab-pane that does not have the id #home. I have tried .tab-pane:not#home{...} but it did not work. Any suggestions?
Sample HTML
<div id="home" class="tab-pane">...</div>
<div id="myself" class="tab-pane">...</div>
<div id="contact" class="tab-pane">...</div>
<div id="resume" class="tab-pane">...</div>
Try instead:
.tab-pane:not(#home) {
color: red;
}
JS Fiddle demo.
The thing that you're not-selecting appears within the parentheses of the :not() selector, rather than appearing as a 'chained' pseudo-selector.
In this specific case, since the element you want to have not-styled is the first element, you could also use the general-sibling combinator ~ to style subsequent siblings differently:
#home ~ .tab-pane {
color: red;
}
JS Fiddle demo.
But this would, and could, only work if the differently-styled (or un-styled) element is the first, since CSS can only select elements that appear later in the DOM, either as subsequent siblings, or descendants, of earlier elements.
References:
Selectors Level 3, negation :not() pseudo-class.
Maybe you meant to do this:
.tab-pane:not(#home)
You can access each of the individual classes by either using .tab-pane:eq(noOfClass) selector
Check examples here
OR You can also use :not selector .tab-pane:not(#home)
You can also try this (this is just like regular expressions)
.tab-pane:not([id^='home'])
{/*your code*/}
If you want to not include the id's which start with letter "h" then try the below one:
.tab-pane:not([id^='h'])
{/*your code*/}