This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
Is it possible to use a "wildcard" for elements having a class name starting with a specific string in CSS3?
Example:
<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>
and then magically set all the above divs to red in one go:
.myclass* { color: #f00; }
The following should do the trick:
div[class^='myclass'], div[class*=' myclass']{
color: #F00;
}
Edit: Added wildcard (*) as suggested by David
It's not a direct answer to the question, however I would suggest in most cases to simply set multiple classes to each element:
<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>
In this way you can set rules for all myclass elements and then more specific rules for one, two and three.
.myclass { color: #f00; }
.two { font-weight: bold; }
etc.
You can easily add multiple classes to divs... So:
<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>
Then in the CSS call to the share class to apply the same styles:
.myclass {...}
And you can still use your other classes like this:
.myclass-three {...}
Or if you want to be more specific in the CSS like this:
.myclass.myclass-three {...}
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I want to select the sections according to the item number.
:nth-child and :nth-of-type don't work for me. I can't select sections separately. I want to select section 1 and section 3 in my code below.
section:nth-of-type(1) {
color: red;
}
section:nth-of-type(3) {
color: aqua;
}
<section>section 1</section>
<section>section 2</section>
<div class="container">
<section>section 3</section>
<section>section 4</section>
</div>
<div class="footer">
<section>section 5</section>
</div>
But this method doesn't work properly.
Note: I want solution without javascript.
Try using nth-child(n) instead.
section:nth-child(1) {
color: red;
}
section:nth-child(3) {
color: aqua;
}
Using nth-of-type gets every other element while nth-child finds the specific item index.
give each section an id or a class
<section id="1">section 1</section>
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
i am trying to bind style in my css style using below format but its not working and i am learner for web development can some one help me please what is mistack?
css
.block-header.row.sample h1{
color: aqua;
}
html
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
The problem in your rule is that there are no spaces between your classes, which makes the selector any h1 element with the parent having classes block-header, row, and sample.
You would need to put spaces so that the selector knows these elements are nested inside each other:
.block-header .row.sample h1 {
color: aqua;
}
Learn more about how these selectors work from this FreeCodeCamp guide.
Your style rule is wrong, it should be: .block-header .row.sample h1 instead of .block-header.row.sample h1. When you have a style for an element that's a descendant of another one (in your case .row.sample is a child of .block-header) you should have the parent first, followed by a space (or > if it's a direct child) and then the descendant element, just like you're doing with the h1...
You can see it works with that simple change:
.block-header .row.sample h1{
color: aqua;
}
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
You can read more about selectors in mdn.
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
Can this be done using some kind of if statement condition in CSS?
For example, in 1.html:
<div class="classname"> Some code </div>
In 2.html:
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
Once again, I would not like to remove the class name at all, if possible.
Thanks!
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>
.ancestor1 .classname {}
.ancestor2 .classname {}
Obviously this depends on where in the html they might be.
You can add another class name to each element.
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
Updated Demo link: http://jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp
Just give each one a different id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
.classname.secondclassname{
}
You can also do something like this:
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classname would be something like that:
.classname:not(.second) {}
For the second element it goes easily:
.classname.second {}
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
First menu:
<div class="classname"> Some code </div>
Second menu:
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS Selector that applies to elements with two classes
I've got the following:
<div class="green-arrow current-plan span4">
<img src="/images/assets/green-arrow.jpg">
</div>
<div class="green-arrow plan-above span4">
<img src="/images/assets/green-arrow.jpg">
</div>
And I want to target plan-above so it's display: none; without affecting other instances of plan-above (which are not green-arrow).
div.green-arrow.plan-above {
display: none;
}
Try this:
div.green-arrow.plan-above {
display: none;
}
Further you can use CSS3 to excluded several classes comma seperated
div.plan-above:not(.class, #id) {
//mark up
}
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 1 year ago.
Unless it's not supposed to but I can't seem to get nth-child to acknowledge the class selector.
I have say 4 divs inside another div, all of various classes and ids. I need to select the first instance of a div with said class. For example:
#content .foo:nth-child(1) { margin-top: 0; }
And obviously again with first-child to get the same affect, but it doesn't affect any of the divs.
Now if I want to force it to work with that div I can do this:
#content .foo:nth-child(3) { margin-top: 0; }
It just so happens that it is the 3rd div in #content, which is pointless because I need to get the 1st instance of anything with that class.
<div id="content">
<div id="action-bar"> </div>
<div id="message"> </div>
<div class="table"> </div>
<div class="clear"> </div>
</div>
Here's a sample of the HTML, I've tried nth-of-type as well like this:
#content .table:nth-of-type(1) { margin: 0 }
Again it only responds when I say nth-of-type(3).
EDIT:
I've set up a working example of the problem I'm having here: http://jsfiddle.net/aHwS8/
Try the :nth-of-type() pseudo-selector instead:
#content .foo:nth-of-type(1) { margin-top: 0; }
Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:
<div>
<i class="foo">1</i><i>x</i><i class="foo">2</i>
<b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>
.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.
This is an old post but I ended up here seeking for an answer for similar problem. Perhaps this will help someone.
I had the following structure, wanting to select the n-th "foo"-div:
<body>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
<div class='container'>
<div class='foo'></div>
</div>
</body>
The trick was "go back" and select the parent element with repeated siblings, in this case .container and then select its child(ren):
.container:nth-of-type(3) .foo {
styles here
}
I think you're using the wrong selector, try:
#content .foo:first-of-type { margin-top: 0; }