This question already has answers here:
CSS Selector that applies to elements with two classes
(2 answers)
Closed 3 years ago.
Let's say we have this markup:
<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>
Is there a way to select only the <div> which has BOTH abc and xyz classes (the last one) AND override its inline width to make the effective width be 200px?
Something like this:
[selector] {
width: 200px !important;
}
div.abc.xyz {
/* rules go here */
}
... or simply:
.abc.xyz {
/* rules go here */
}
Below applies to all tags with the following two classes
.abc.xyz {
width: 200px !important;
}
applies to div tags with the following two classes
div.abc.xyz {
width: 200px !important;
}
If you wanted to modify this using jQuery
$(document).ready(function() {
$("div.abc.xyz").width("200px");
});
If you need a progmatic solution this should work in jQuery:
$(".abc.xyz").css("width", 200);
Related
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 3 years ago.
OK, simple question I know - but which of these is correct?
I am trying to hide this div:
<div class="notice important-message">
.notice .important-message {
display: none
}
or - classes joined together like this:
.notice.important-message {
display: none
}
.notice .important-message
would select the element .important-message in this case:
<div class=".notice>
<div class=".important-message"></div>
</div>
.notice.important-message
selects this:
<div class="notice important-message"></div>
so the second one would be correct.
Check this for more references.
Second is correct. You can also do div.class1.class2 {}
In this case 2 classes are on same node
<div class="notice important-message">
so to access this code you can use (without space)
.notice.important-message {
display: none
}
If these 2 classes are on parent child node
that is
<div class="notice">
<div class="important-message">
</div>
</div>
then you can use (with space)
.notice .important-message {
display: none
}
Try this
<div class="hide">
.hide {
display: none;
visibility: hidden;
opacity: 0;
}
This question already has answers here:
CSS Variables - Swapping values?
(1 answer)
Inverting colors with CSS Variables
(1 answer)
Closed 3 years ago.
Let's say I have two css variables, control-color and control-color-inverse. I want to make a <div> where all of the colours are inverted. But this doesn't seem to work properly:
* {
background-color: var(--control-color);
color: var(--control-color-inverse);
}
:root {
--control-color: gainsboro;
--control-color-inverse: black;
}
#child {
--control-color: var(--control-color-inverse);
--control-color-inverse: var(--control-color);
}
<div id="parent">
<p>not themed</p>
<div id="child">
<div id="grandchild">
<p>themed</p>
</div>
</div>
</div>
For example, in this snippet, div#child should have a black background with grey text. But it seems that I end up with a circular reference and it cancels out. How can I accomplish what I'm trying to do?
I think you can do this
#child {
background-color: var(--control-color-inverse);
color: var(--control-color);
}
or you can use other variable name
#child {
--child-control-color: var(--control-color-inverse);
--child-control-color-inverse: var(--control-color);
}
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
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 {...}
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
}