Okay, so I am slightly confused with declaring and calling a class in css. when I create a class it uses a "." but when I call it it doesn't, for example.
.smaller-image {
width: 100px;
}
<a href="#"><img src="someimageurl.com" class="smaller-image" alt="some image
text."></a>
CSS applies style to HTML elements using either their class, id or tag name (e.g. body).
When writing a CSS rule to apply to a class, you prefix the class name with ..
When writing a CSS rule to apply to an id, you prefix the id name with #. Note that an id should only be used by one element on a page, whereas a class can be used as often as you like.
Examples:
div {} /* This is applied to all div elements */
.button {} /* This is applied to all elements with the `button` class */
#header {} /* This is applied to the element with the `header` id */
a.link {} /* This combines both the `a` tag and the `link` class */
The preceding dot defines it as a class in CSS, as opposed for example to a tag like div (no prefix at all) or a hash for an id (#something). In HTML all that is not needed, since the attributes are class , id or no attribute.
In HTML, the class names are clearly class names because they are contained in the class attribute. They don't need anything else to make it clear they are class names.
In CSS, a selector can be made up of many things. IDs, element types, attribute names, attribute values -- and others! So you need something to make it clear that what you are using is a class name. The . character means "what comes next is a class name".
The name HTML stands for Hyper Text Markup Language, and it describes the structure of web pages using markup elements that represented by tags. Each tag can hold attribute(s).
The class attribute specifies one or more class names for an HTML element.
CSS stands for Cascading Style Sheets and it describes how HTML elements are to be displayed on screen (or in other media).
In CSS, to select HTML elements with a specific class, we use period (.) character, followed by the name of the class.
Hope this clarify your mind, and enjoy coding!
Edit: in your example you use .com as source. You can't.
Read here for images format and support:
https://en.m.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
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.
Not sure if this is possible or if I'm just not asking the right questions, but I'm looking to apply a global rule for a set of classes that have different suffixes.
ie.
.gallery {} would like these rules to apply also to .gallery-1, .gallery-2, gallery-3 {} etc... Without having to add those actual specific classes to my stylesheet each time a new gallery is made.
Does anyone know if this is possible?
with thanks.
You could use the attribute selectors. Possibilities include:
[class|='gallery'] - matches all elements whose class attribute is exactly gallery, or begins gallery-
[class^='gallery'] - matches all elements whose class attribute starts with gallery
Note that I'm not clear what happens if your element has more than one class, as class="some-class gallery-1"
You can use wildcards with attribute selectors to do just that. Something like this should work for your case:
[class*='gallery-'] {
do:something;
}
See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Note the "Summary" section in the link above, it describes the different behavior of the "wildcard" symbols.
A simple alternative would be to simply apply two classes to your html elements:
class="gallery gallery-1"
Here is a very similar question and answer Is there a CSS selector by class prefix?.
Use CSS Selectors
For your example, you'll need this:
[class^='gallery']
(get all elements with a class name beginning with gallery)
I was just looking at my CSS and the h1 tag is defined like this:
h1 { .... }
When everything else either has an id "#" or a "." class preceding it. What is the reason header tags don't need this? Have I infact made a mistake and they do need one?
This means that all occurences of h1 will share the same style. Similarly, you can have a style defined for any other element, e.g.:
p { font-family: Helvetica; }
That means all p tags will use the Helvetica font.
Note that it's also a best practice to have just one h1 element in a page.
You can find a brief overview what different types of selectors mean here.
It's said in the doc:
5.4 Type selectors
A type selector matches the name of a document language element type.
A type selector matches every instance of the element type in the
document tree.
So any valid element may be selected just by specifying its name. It also works in more complex selectors, by the way.
Its not just header tags. All elements are "selected" simply by their name alone. '#' is used to "select" by id and "." is used to "select" by class.
The idea is not that the "h1" tag does not need to have "class or id". It can have a class or id just like other tags. It is just up to you, and how you use it. As mentioned in other answers if you want to apply a specific style to all your h1, then you will have it without a class and your CSS would be: h1{...}
But if you want to use specific styles to each "h1" tag you have, then you can use a class attribute to identify each one "h1", see the following example:
Let's say you have two "h1" tags in your HTML code and you want to style each one with a different color, then you can do the following:
HTML:
<h1 class="first-header">Hello World1</h1>
<h1 class="second-header">Hello World2</h1>
CSS:
h1.first-header{color:red;}
h1.second-header{color:blue;}
This will display your first h1 in red color and the second in blue.
This seems like it would be an easy fix with a Content Editor Web Part to modify the css of the page's Web Parts. The underline I mean is the long line that leads to the dropdown arrow where the Modify, minimize, close, etc. options are. I have tried this code with no visible results:
<style>
ms-standardheader {text-decoration:none;}
</style>
You need to read up about CSS selectors.
A CSS rule is composed of two parts: a selector and a declaration block.
Generally, they look something like this:
selector { declaration block }
Your problem is with the selector, and to understand your error I'll have to explain some basic selector syntax.
In the selector you can 'target' HTML elements with styles using various constructs:
Target by tag name
Target by id
Target by class name
Target by Tag Name
The simplest is targeting by Tag Name. In this case use the tag name of the element targetted with white space on both sides:
p { /*...*/ }
Now all <p> elements will be affected by the above rule.
Target by Id
If the element you are targeting has an id attribute you can target by id by prefixing with an octothorpe #:
#p { /*...*/ }
Now the element with id="p" (no matter what the tag name) will be affected.
Target by Class Name
If the element you are targeting has a class attribute you can target by class name by prefixing with a period .:
.p { /*...*/ }
Now the elements with class="p" (no matter what the tag name) will be affected. Note that an element can have more than one class name, separated by spaces, so class="p x" is also affected.
Your Rule Doesn't Make Sense
So your rule doesn't work first and foremost because is doesn't make sense ;)
ms-standardheader {text-decoration:none;}
In the absence of a period . or an octothorpe # this targets by tag name. But <ms-standardheader> elements don't exist, so it has no effect.
Your Rule Is Also The Wrong Rule
You're also trying to style the wrong element, so let's look at the Web Part to style. I assume you're trying to remove the line I've pointed out with the red rectangle:
This line is not actually an underline, but is instead a border-bottom from a <td> element. The rule which creates this underline is on line 2664(ish) of _layouts/1033/styles/core.css and looks a little like this...
.ms-WPHeader TD{
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
Try this in another CSS file:
html body .ms-WPHeader td {
border-bottom:none;
}
Adding the html body increases the specificity of your rule so it will take precedence over the rule in core.css.
Is ms-standardheader a class or an id? If it's a class, use .ms-standardheader. If it's an id, use #ms-standardheader. You should also add type="text/css" in your style tag.
I want to apply a CSS rule to any element whose one of the classes matches specified prefix.
E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
Some sort of combination of:
div[class|=status] and div[class~=status-]
Is it doable under CSS 2.1? Is it doable under any CSS spec?
Note: I do know I can use jQuery to emulate that.
It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):
div[class^="status-"], div[class*=" status-"]
Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:
[class^="status-"] — starts with "status-"
[class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).
Naturally, this also works in jQuery, as demonstrated here.
The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.
If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.
CSS Attribute selectors will allow you to check attributes for a string. (in this case - a class-name)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(looks like it's actually at 'recommendation' status for 2.1 and 3)
Here's an outline of how I *think it works:
[ ] : is the container for complex selectors if you will...
class : 'class' is the attribute you are looking at in this case.
* : modifier(if any): in this case - "wildcard" indicates you're looking for ANY match.
test- : the value (assuming there is one) of the attribute - that contains the string "test-" (which could be anything)
So, for example:
[class*='test-'] {
color: red;
}
You could be more specific if you have good reason, with the element too
ul[class*='test-'] > li { ... }
I've tried to find edge cases, but I see no need to use a combination of ^ and * - as * gets everything...
example: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Everything above IE6 will happily obey. : )
note that:
[class] { ... }
Will select anything with a class...
This is not possible with CSS selectors. But you could use two classes instead of one, e.g. status and important instead of status-important.
You can't do this no. There is one attribute selector that matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.