I am using box-sizing and padding in my responsive design.
Effectively by using the following code:
.col * {
}
I am able to target everything within my section named 'col'. This is great, until I start adding elements within each other, then the class gets added again.
I have put together an example here http://jsfiddle.net/XS7KB/1/. You will see that the first line of the <h1> has the box-sizing added again because of the href. I would imagine it's the same if I add another span, list, hr ect. This could be problematic.
What im looking for is a way to apply this to the first set of tags and nothing in between. Perhaps a different selector would prevent this from happening.
Any help would be greatly appreciated.
If by "first set" you mean "first nesting level", use the child selector to limit it only to that set of elements:
.col > * {
}
This will only select the h1 and p which are children of .col, and not anything inside them.
Updated fiddle
Related
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
I found some stylesheets using * symbol on it. for example *zoom: 1; what does the * symbol stands. sometimes which appears like [class*="span"] this. can anybody clear me the usage of the symbol * in css
*zoom is a hack that applies it ie6 and ie7. * { } is a wildcard (matches all elements or subset; if used like #header * it would apply to all descendants of #header). [class*="span"] matches elements that have a class with the word "span" anywhere.
If * is used an independent selector, it means all.
But if used inside the attribute selector [ ], it means "contains". For example, you have
[class*="span"]
. It means, it will select all elements that has a class which has a "span" somewhere in the class name.
It also used as CSS hack if it's inside the style value.
It is a wildcard which select all elements.
For example, if you apply margin to every element on entire page you can use:
* {
margin: 50px;
}
You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:
p * {
margin: 10px;
}
See this:- http://www.stackoverflow.com/a/1204290/2256325
Regarding you example, let me tell you that if you add asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Its only applicable to version 7 or below .
Source :-http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
In addition to using the asterisk (at the start of a property name) to select only for older IE browsers, for CSS the many varied details are at w3.org:
CSS2.1 -- http://www.w3.org/TR/CSS21/selector.html
CSS3 -- http://www.w3.org/TR/css3-selectors/
I've inherited the following CSS code to initially hide the latter elements of a series of paragraphs and a series of list items.
.profileSection p:nth-of-type(n+2) {
display: none;
}
.profileSection li:nth-of-type(n+6) {
display: none;
}
Obviously, this code does not work in IE8. What is an alternate way to hide these elements?
Here is a discussion on it:
http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/
The writer mentions that you can reference specific children element by using
tagname + tagname + etc
Or get generic children by using
* + * + etc
I personally would just add a special class to those items.
+, the adjacent sibling selector, would allow you to select all siblings which are immediately adjacent. In your case: .profileSection p+p. (If you must do this, consider wrapping it in something to prevent other browsers from seeing it, like conditional comments.)
But + won't help if your markup contains something other than <p> elements right next to each other. For example:
<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>
If you don't already have some kind of shiv or moderizr functionality on the site (which would help with many other similar issues), it would be easiest to add a special class to the elements, and select using that class.
You can also try downloading and including selectivizr, which makes css3 selectors work in IE6-8
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.
I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?
I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.
I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks
I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?
I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.
I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks
This is not the entire HTML/CSScode, but I could manage to take some screenshots. You guys helped me answer some questions and understand how period is not relevant to what I was trying to do.
Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view) Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup. I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS? I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue? The CSS code is in screenshot 2. After looking at the discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
In CSS, a period without spaces like this.thing means:
select elements that have the class thing but only if they are of type this
Period (.) is a special character in CSS, so you can't name classes with periods. Try an _ or a -.
Actually you can't use period in class names, because it is a class selector. For example, is you have a class "foo" applied to some html element, you can style this element in css linking to it as ".foo".
Example HTML:
<header class="foo">
<img class="bar" src="some/path/here">
Some content here
</header>
Example CSS:
.foo { color: #AAA; }
or
header.foo { color: #AAA; }
In first CSS example the style will be applyed to all elements, wich have class "foo". In the second - to all elements, wich have class "foo" and same time are of "header" type.
Returning to your case, I think the only aim is to apply style to image inside of header element. It can be done different ways:
Use the image class
.bar { width: 100px; }
or more concretely
img.bar { width: 100px; }
Use parent-child relations
header img { width: 100px; }
above will apply styles wich lay inside the header element or in its
children elements
header>img { width: 100px; }
this will be ok only for the direct child of header.
Combine two approaches.
If you know for shure that there will be only one image in header element, I can recommend the approach with ">". Read more about different css selectors, ids and classes. It will do the job.
Assuming your markup looks like this:
<header><img /></header>
The selector you want would be this:
header img {...}
If you really did class your image with class="image" (kinda redundant), then you'd want:
header .image {...} /* note space */
This assumes that the browser supports the html header element. If it doesn't, you'd want to use something like html5shim 1 or modernizer 2