Some CSS selectors have # in front of them, what does that mean?
It's the ID selector, a fundamental feature of the CSS standard. It matches the HTML element with the given ID, according to the id attribute (assuming a conforming document, of course). See the W3C Selectors spec for more.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#my-div {
color: #f00;
}
</style>
</head>
<body>
<div id="my-div">This text will be red.</div>
<div id="another-div">This text will not be red.</div>
</body>
</html>
You may also have seen the # notation used in a URL fragment identifier to refer to named anchors (<a name="some-anchor"></a>). These can also point to elements with certain IDs in your page, just like named anchors, and I gather that it's why CSS uses the same notation for selecting IDs.
The selector, #foo will match any element with an ID attribute with a value of "foo".
<style type='text/css'>
#foo { color: red; }
</style>
<div id='foo'>red text</div>
In CSS,
# is Mention for ID Selector
. is Mention for Class Selector
You might also have seen something like
div#myDiv {}
Which means "a DIV-tag with ID set to 'myDiv'"
It selects based on the id of html element...
http://www.w3.org/TR/CSS2/selector.html#id-selectors
<style>
#myDiv { }
</style>
<div id="myDiv">
</div>
Related
I'm working on making a dark mode for the Kaplan website tests so I don't blind myself studying.
The following HTML code is representative of the structure of the source, and the tag with id="stylish-23" is what's added by a chrome extension to change the page's CSS styling:
<html> // html 1
<html> // html 2
<html> // html 3
<html> // html 4
<div id="divQuestions"> </div> //actual tag I want to change
</html> // html 4
</html> // html 3
</html> // html 2
<style id="stylish-23" type="text/css">...</style>
</html> // html 1
I put div#divQuestions in the style tag's CSS and it does not appear to have any effect at all. Due to the nature and limitation of the extension, I'm only able to add CSS to the style tag, and the CSS appears to not be able to select HTML tags (or at least when I do, nothing happens). I've noticed that dragging the style tag into html #4 in developer console will properly apply the CSS.
The element in question's CSS from inspect:
My CSS in the style tag:
div#divQuestions {
background: black;
}
Thanks for the help!
#divQuestions selector works for me if I fix the div's closing tag (or even if I don't, as it turns out):
<html>
<html>
<html>
<html>
<div id="divQuestions"> </div>
</html>
</html>
</html>
<style id="stylish-23" type="text/css">
#divQuestions {
padding: 48px;
background: aliceblue;
border: 4px solid blue;
}
</style>
</html>
nth-of-type is a selector that matches the nth element of their "type".
So, you can do this:
html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...
Or, you can do this since you said "multiple nested tags":
html
html > html
html > html > html
...
I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>
From MDN it says:
The HTML <div> element is the generic container for flow content and does not inherently represent anything.
It also says:
The HTML <span> ... does not inherently represent anything.
However, my code shows div and span do inherit color attribute from body tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body{
color: red;
text-align: center;
}
</style>
</head>
<body>
<div>
test div
</div>
<span>test span</span>
</body>
</html>
In the above code, both test div and test span are red and centered. So how to interpret MDN's word?
Start with a dictionary. Inherent (with an en) and inherit (with an i) are different words with different meanings.:
inherently
In a permanent, essential, or characteristic way.
The sentences are talking about the semantics expressed by the elements. They have absolutely nothing to do with CSS inheritance:
inherit
Derive (a quality, characteristic, or predisposition) genetically from one's parents or ancestors
I have an html page with only one button
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css1.css" type="text/css">
<link rel="stylesheet" href="css2.css" type="text/css">
</head>
<body>
<div class="container">
<button class="btn ovalbtn">
Save
</button>
</div>
</body>
</html>
And those are the 2 css classes used:
CSS1:
.container .btn {
font-size: 4.0em;
}
CSS2:
.ovalbtn{
font-size: 16px;
}
I wonder why the button aquires the font-size from CSS1 while I overrode it with another class in CSS2. I know it's related to css specificity but I have shallow knowledge in this area.
It is due to specificity.
A class selector has a given level of specificity. Two class selectors are more specific than a single class selector. Thus rules in a rule-set with two class selectors (and nothing else) will overwrite rules for the same properties in a rule-set with a single class selector (and nothing else).
Because in your CSS 1 button have more specific rule compare to CSS 2. If both CSS have .container class in their rule then your CSS 2 will effect to that button
So if you want to effect your CSS 2 then do one change pas per following :-
.container .ovalbtn {
font-size: 16px;
}
The browser displays CSS1 because it is more specific than CSS2. When the browser sees different CSS codes changing the same element it applies the one which is more specific.
You can read about CSS Specificity here.
I'm trying to write a style but am having trouble identifying a class of element identified by an ID such as airbus.errors (first example) or boeing.errors (second example below).
<div class="message">
<span id="airbus.errors">
</div>
I've tried this but it doesn't work:
.message .errors
{
background: red;
}
I need to write it generically so that it would also work with this case:
<div class="message">
<span id="boeing.errors">
</div>
You could use the CSS3 Attribute Selector:
[id$=errors] { ... }
This will select any element whose id ends with the value "errors".
Note that browser support is a little iffy.
I think you were trying to have errors as a class instead of in ID attribute. You can do:
<div class="message">
<span id="boeing" class="errors">
</div>
It would work the CSS selector you already have:
.message .errors {
background: red;
}
When you write .message .errors it's looking for an element with a class message and descendants with a class errors which doesn't match your HTML
Try this instead:
.message #boeing-errors
{
background: red;
}
or just
#boeing-errors
{
background: red;
}
since #boing-errors is an ID and should be unique.
Note that in CSS the . character is reserved for class names
If you have no control of this ID being output you can't use it since the ID has a . in it. You can do this, but it might be too generic:
.message > span { background: red; }
Here's another question on SO for valid css characters: Which characters are valid in CSS class names/selectors?
Your names are invalid. CSS class and id names should only be alphanumeric values and can include a - or _. Check the docs for the full naming convention syntax.
Drop the ., example: <span id="airbus_errors">
However, by your CSS, I think what you are meaning to do is share an errors class. In which case, this should be your markup:
<div class="message">
<span id="boeing" class="errors">
</div>
If you want it to work for both, then you need to give them a common class. IDs are unique, so you'd have to specify #airbus.errors, #boeing.errors {...}, etc. To do it in one CSS rule you need to give them both a common class such as errors.
.message .errors {
background: red;
}
<div class="message">
<span id="airbus" class="errors">
</div>
<div class="message">
<span id="boeing" class="errors">
</div>
If you can't make it a class for some reason, then you have no choice but to be explicit and set it for each ID unless you use CSS3 attribute selectors.
.message #airbus.errors,
.message #boeing.errors {
background: red;
}
If you're developing for browsers which support CSS3 (so not IE), then you can achieve what you want with this, (see CSS3 spec for more info)
.message span[id$="errors"] {
background: red;
}
Try the attribute selector and its variations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="message">
<span id="airbus.errors">airbus</span>
</div>
<div class="message">
<span id="boeing.errors">boeing</span>
</div>
<div class="message">
<span id="something.errors">something</span>
</div>
<div class="message">
<span id="no.error">error</span>
</div>
</body>
</html>
Here is the CSS
[id$=".errors"]
{
color: red;
}
There's really not much you can do, especially cross-browser, to fix that kind of ugly CSS. I see one really portable alternative, and that's this JavaScript:
var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
var id = spans[i].id;
if(id && id.length > 7 && id.substring(id.length - 7) === '.errors') {
spans[i].id = id.substring(0, id.length - 7);
spans[i].className = spans[i].className ? spans[i].className + ' errors' : 'errors';
}
}
You could then refer to your elements as span.errors in your CSS selector. This is really not a good solution, but then again, there's not much else you can do. If the IDs have to stay the same, just remove the spans[i].id = ... line. If they absolutely can't have a class then you can use some fancy JavaScript to read the CSS selector and apply inline styles based on that, too.