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.
Related
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
I have a style sheet that consists styles that affects two elements in my page, I can't change the classes for my elements, is there any way to make sure that the styles apply to only one specific element in my page not for the other.
Have you tried the first-of-type selector?
ex.
p:first-of-type {
background:#ff0000;
}
Yes. You can do that by specificity.
Select topmost parents and go on targeting their childs until you reach the last child element that you need to apply styles for.
If you can add an id to it or if any id is dynamically generated, just create a specificity for the same and you will get your thing done.
For Instance,
body div#your id name div.your_class1 > div.your_class_element_that_you_want_to_style{/* your values */}
Hope this helps.
PS: In the illustration, div is used as a reference and you can select the elements accordingly to your HTML structure.
If there are two, you use the :first-of-type selector:
div.selector:first-of-type {
/* styles here */
}
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
i have a problem to override the css in content page div tag .
I'm using nested masters.So in both master pages i used so many div tags with same css theme.
But i want to omit css style for one particular div tag in content page.
Thanks in advance.
If you've defined styles to div { ... } in your CSS, then you can't simply 'disable' them on a new div unless you explicitly redefine them to the default. If all you div styles are declared via class or id attributes, then using a bare div will have this same effect.
Example, bad CSS. This can't be overridden without explicitly giving your target div a class or id and redefining font-size.
div { font-size: 23em; }
Example, better CSS. If you define all your div CSS with classes and ID's then when you want default styling just use a unclassed, un-ID'ed div.
div.reallyBig { font-size: 23em; }
Without seeing your original markup its hard to be much more specific. You may need to reassign styles / classes / id's for your desired effect.
You can give the div an ID and a style of its own using an id selector (#). You can't disable CSS for a specific instance of a tag.