How do I make the first line of ::after in bold?
I'm making a CSS snippet for Obsidian. I want to make a Dropdown for tags that start with '#-'. How do I make the first line bold?
I can't change HTML code:
<p>
<a href="#-Dropdown" class="tag" target="_blank" rel="noopener">
#-Dropdown
</a>
</p>
Those CSS blocks don't even appear in the devtools:
a.tag[href^='#-']::after::content {
font-size: 20px;
}
a.tag[href^='#-']::after::first-line {
color: red;
}
A jsfiddle if you're willing to try yourself
Related
Let's say I have links looking like buttons all over my app. They are orange, unless they are "disabled" (having no href):
a.button {
background-color: orange;
}
a.button:not([href]) {
background-color: grey;
}
Now, I'm not sure how to allow certain buttons look different in their context, but keep the disabled ones as they were. Let's say I need the "buttons" inside my <footer> to be green, or - as usual - grey if disabled:
footer a.button {
background-color: green;
}
The problem is that this rule has higher priority, as it's more specific. How can I allow disabled buttons in the footer to still be grey without repeating my code? I know I can use !important, but please assume that my real-life example is more complex and I want to avoid using it.
Use CSS variables. You define the default value and you simply set the variable to define a new one.
a.button {
background-color: var(--main, orange);
}
a.button:not([href]) {
background-color: var(--disable, grey);
}
footer#foo a.button { /*I am adding an ID to make it really more specific*/
--main: green;
}
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button">a link</a>
a link
</footer>
Check out http://qnimate.com/dive-into-css-specificity/ to see a full list of CSS specificity.
Assuming you have more than one a.button in your footer, we'll skip using a plain id selector. You could pair an id and attribute selector, using the title attribute to identify all disabled "buttons":
index.html
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button" title="disabled">a link</a>
a link
</footer>
and styles.css
#foo a[title="disabled"] {
color: green;
}
I have a very simple react component
class UpgradeContainer extends Component {
render() {
return (
<div className={styles.msg}>
<div className={styles['msg-container']}>
<h3 className={`${styles.title} highlight-color`}>
Big Header
</h3>
<div className={`${styles.description} alternate-color`}>
Small text
<br />
Some more small text
</div>
</div>
</div>
);
}
Here is the relevant css
.title {
font-size: 40px;
line-height: 50px;
color: white;
}
.description {
text-align: center;
font-size: 16px;
padding: 20px 0 10px;
color: white;
}
And here is the DOM output from above component
It is reproduced as text here:
<div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1">
<h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0">
Big Header</h3>
<div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1">
<span data-reactid=".0.1.0.0.0.1.1.0">Small text</span>
<br data-reactid=".0.1.0.0.0.1.1.1">
<span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div>
As you can see, reactjs has added a couple of <span/> to wrap the small text
I expect the title text (Big Header) to be much larger than the description text (small text and some more small text).
The output however looks something like this:
It is because reactjs, for some reason, addd a span to wrap around the text small text and some more small text ( data-reactid ".0.1.0.0.0.1.1.0" and ".0.1.0.0.0.1.1.2" respectively)
When I checked the style I found that the styles of these span elements are overridden by the following css rules
I am really puzzled by it because I did not define these rules myself.
So I click on the <style>...</style> and it takes me to
I want to know how I can effectively override these css rules?
The end result I want is:
If you're using 'Normalize.css'!
A Solution for this problem is to keep your main css file 'style.css' in the bottom. At least below normalize.css.
In case you're using Bootstrap,
Straight from the Bootstrap Official Website , "For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal."
Solution for this problem is to keep your main css file 'style.css' in the bottom. At least below bootstrap.css.
I am learning Selectors and not.
What I am trying is to PUT the text of the span in color red BUT NOT the text of the link, combining both. It is just to learn.
My HTML code
<div>1
<p>2
<span>Here red
<a>Here NOT red
</a>
</span>
<div>3
</div>
</p>
</div>
What I am trying to do with CSS
div p span:not(:nth-child(0)) {
color: red;
}
/* Or */
div p span:not(a) {
color: red;
}
Anyone can help me? I do not want to set another rule for A. It is just to learn as I said.
Thanks!
There were a couple of issues with your page. One is that you had an extra div closing tag. Second, the a tag defines a hyperlink, so it should have an href attribute. Your a tag had no attributes.
Take a look at this snippet
span:not(a) {
color: red;
}
<div>1
<p>2
<span>Here red
Here NOT red
</span>
</div>
</p>
</div>
Alternatively, you could just close the span tag before the a tag, and then just select the span element.
I've been a bit confusing on how to do so...
This is my code:
<div class="game_grid">
<center><div id="game_name"><?php echo $game_name; ?><br /></div></center>
<div id="game_image"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></div>
</div>
I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...
Any idea?
I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.
For example a simple build: http://jsfiddle.net/B6gD4/
Maybe style the image: http://jsfiddle.net/B6gD4/1/
And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/
Simple HTML:
<div class="game_grid">
<a href="game_page.php?id=1">
<img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
<span id="game_name">Title</span>
</a>
</div>
CSS:
.game_grid {
text-align: center;
}
.game_grid a {
text-decoration:none;
}
.game_grid a:hover {
text-decoration:underline;
}
.game_grid img {
/* any styles */
}
.game_grid span {
display:block;
font-weight: bold;
}
You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.
There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:
$('#game_image').hover(function () {
$('#game_name').css('text-decoration', 'underline');
}
CSS would have been possible if they were siblings of the same parent element. Then you would have used:
#game_image:hover + #game_name {
text-decoration: underline;
}
If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.
HTML:
<p>
<a href="#">my
<span>favorites</span>
</a>
(13)
</p>
I want "favorites" to drop after "my", and then to separately style "(13)", which should be on the same line as "favorites".
I tried with the above markup and the following CSS but (13) also drops:
p span a { display: block; }
(13) should stay on the same line as "favorites" so it looks like
my
favorites(13)
How about this?
my<br>favorites<span>(13)</span>
The longer version (more flexibility)
If you don't want a line break, you could use a block element. Now, since block elements aren't allowed inside inline elements (<a>), you should use span tags and style them as block elements.
<a href="#">
my
<span class="second-line">
favorites <span class="count">(13)</span>
</span>
</a>
And the CSS:
a .second-line {
display: block;
}
a .count {
color: #888888;
}
Would this work for you?
<p>
<a href="#">my
<p>favorites <span>(13)</span></p>
</a>
</p>