This question already has answers here:
Apply different css stylesheet for different parts of the same web page [duplicate]
(4 answers)
Closed 9 years ago.
I have a website with a corresponding CSS file that defines all its styles. However, there is a specific DIV container on one of the webpages that I would like the styles to be different.
Here is my newbie question: Is there a way to specify another CSS file that applies to just within that DIV??? If so, how? If not, are there any other way of achieving a similar effect?
Thank you very much.
You can achieve it in the following way :
1. Assign a class to the concerned div like
<div class="different">
And then style this class different in your default css, for example :
.different{
font-size:12px;
}
2.The other way is to use IDs , since ids are unique to one element and on page only one element can have that ID .
<div id="diff">
And than in your current css file you can write something like :
#diff{
font-size:12px;
}
They both will serve your purpose but classes can be used multiple time and IDs are unique to a given element. So it's up to you to decide which method you follow.
You can write another class of your existing css file or create a new one(in case of new one, you need to add reference of it in your head tag and) and write their css properties for that div like this
.MyDivClass
{
// your properties here
}
and use it with your div like this
<div class="MyDivClass">
</div>
I don't know. I will do it like this
<div id="special-div"></div>
and I will create a special css file and include #special-div{/*styles here*/}
It is best to include the stylesheet in the <head> I think.
Related
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 5 years ago.
I have the following link which will be rendered inside my breadcrumb navigation:-
<a class="breadcrumbNode" href="http://******/kb/CustomerKB/_layouts/15/listform.aspx?ListId=%7B9A25812B%2DE8BA%2D4085%2D95D0%2D9E05CF3DC441%7D&PageType=0&RootFolder=%2Fkb%2FCustomerKB">CustomerKB</a>
so is there a way using CSS to hide the link which have the following text CustomerKB ??
You can use the *= selector to select based on the link.
a[href*="CustomerKB"] {
display:none
}
If you want to select based on the actual text contents of the anchor tag then you'd need to use something like jquery.
$("a:contains('CustomerKB')").hide();
If you want to hide all elements containing specific text, you will have to use Javascript. The only way I can think of to do this with CSS is by adding another class to the links you want to hide, or wrapping the text in another tag and giving this tag specific classes depending on what's in it, and you do not seem to want to do that.
Any particular reason you do not want to use JS?
If you can use Javascript, I would simply do something like
document.getElementsByClassName("breadcrumbNode").forEach(function(item) {
if (item.innerHTML === "whatevertext") {
item.classList.add("hidden")
}
});
Is there a shorthand way to write the following css classes that all have the same style?
.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}
I need to avoid picking up:
.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15
which have different styles.
Thanks.
Mabye try this:
div[class^="gtlab"] {
border: 1px solid magenta;
}
div.gtlab2-16, div.gtlab1-57 {
border: 0;
}
If finds divs that have "gtlab" somewhere in its class, and then override the ones you want to exclude.
reference is here: this site i have bookmarked and i revisit that page all the time http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could add the same class to all elements as suggested, but if you dont have access to the html (using CMS or what ever) You could add a class to the elements with jQuery .addClass() and having div[class^="gtlab"] as your selector.
Short answer is:
[class*=gtlab]:not([class*=-16]):not([class*=-15])
But depending on the rest of your code and expected browser support (IE8?), this may not work.
Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.
Use more classes? It seems like the gtlab2 part is describing one aspect while the number is representing another. Why not split it into two distinct classes that can be used together?
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: div id VS. div class
I am new to CSS and have general question: how do you decide wether it is better to use class selector or id selector?
The answers on this page are all good, but approach the difference from a more pragmatic point of view. Let me try an explain it to you from another point of view. The id you use when you define a conceptual entity of your page, for example a list of something, or a page footer or a navigational menu. Something of which you generally have merely one, as another wouldn't make sense or would be another type of entity. When you have a pattern of repeating entities, or element which serve the same purpose you tend to assign them a class, think about section headers, photos in a gallery etc. So the items in the previously mentioned list would all be assigned the same class name.
Note though, that merely for styling reasons you could do with just classes, never use a single id, and be perfectly fine. It doesn't matter whether your class is used just once, or many times.
From the W3C standards an id should only be used once on a page, while a class can be used multiple times.
"ID" definition from http://www.w3schools.com/tags/att_standard_id.asp
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or
by CSS to make changes or style the element with the specified id.
"Class" definition from http://www.w3schools.com/tags/att_standard_class.asp:
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes
to HTML elements with a specified class.
Since an id should be unique on the page it is also accessed A LOT faster through javascript
Id must be unique, class is not. So it depends on how you want to section the page.
id identifies uniquely an element, so you use it when you have only one element with it (ex ...
the class is applied to a group of elements with same features.
best practice says id is unique in the whole html page
ID's should be used for single elements:
<table id="specialtable">
Classes should be used for multiple elements:
<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->
It's good to use an id when you only have one item that you need to style for. Ex:
<div id = 'myDiv>Text</div>
#myDiv
{
display: block;
}
But when you have multiple items that you want to style the same way (say on multiple pages with css file for example) it is faster (and better) to use a class
<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>
.MyDiv
{
color: black;
}
I'm wanting to use properties from other css classes without having to rewrite the code...I'm not too savvy with css so please forgive me for the simple question.
Is it possible to do something like this or similar to it in css?
.class_a {
background:red;
}
.class_b{
.class_a;
}
The best way (that I know of) to re-use css classes is to decide on the css attributes you want to re-use, and put this in a seperate class, like so:
.class_a {
background:red;
}
Then, every time you want to re-use these attributes, you add the class to the html element, with spaces in between different class names, like so:
<div class="text class_a">This will be red, and have the properties of the text class</div>
<div class="text">This will only have the properties of the text class</div>
You can use the same property list for more than one selector:
.class_a, .class_b {
background:red;
}
There are CSS tools which allow you to code in the way you describe. You just do some post-processing of your code to produce valid CSS.
Check out LESS.
Not possible using CSS. However, you can achieve this using something like Sass. Sass allows you write CSS with enhancements such as the one you described. Unfortunately, this introduces an extra step since Sass files must be converted to CSS before you can use them on your page. Could help save you a lot of typing though :)