I’m working with a HTML file where empty lines are made using: <p><br/></p>. How do I target paragraph elements after this empty lines? I have tried br + p with no result.
[Note: It is not evident for everybody that this is a parent’s selector problem, for it is not about targeting the (parent) paragraph element that contain the line break, but the one following it.]
Note: I generally do not support javascript solutions to CSS questions. However, a pure CSS solution would probably require a relational pseudo class. Currently (as per january 2018) :has() is a part of the CSS Selectors Level 4 Working Draft, but unfortunately it's not (yet?) supported by any browsers.
What you are asking can be achieved with a combination of javascript and CSS. You may use javascript to find paragraphs that contain only linebreaks, and then add a class to these paragraphs (e.g. a class named linebreak). Then use CSS to style the paragraphs immediately following the ones containing line breaks using the CSS adjacent sibling selector (+).
// Find all <br> elements that are children of a <p> element
for(let br of document.querySelectorAll('p > br')) {
// Climb one level up the DOM to select the parent <p>
let p = br.parentNode
// Use regex to check if the <p> contains only linebreaks
if( p.innerHTML.match(/^(<br\s?\/?>)+$/gi)) {
// If so, add the class 'linebreak'
p.classList.add('linebreak')
}
}
/* Select the <p> following the one containing linebreaks */
p.linebreak + p {
color: red
}
<p>Paragraph</p>
<p>Paragraph</p>
<p><br></p>
<p>Paragraph after linebreak (Should be red)</p>
<p>Paragraph</p>
<p><br><br></p>
<p>Paragraph after double linebreak (Should be red)</p>
<p>Paragraph</p>
<p>Paragraph</p>
I do not know a way in CSS, but using jQuery, you can do that.
This is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="s.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="sh.js"> </script>
</head>
<body>
<p>LILI</p>
<br>
<p>Dina</p>
<p>ADEM</p>
</body>
</html>
Just use this jQuery:
$( document ).ready(function() {
$( "br" ).nextAll().css( "font-size", "35px" );
});
So it will apply to all paragraph elements after this empty line.
Using that, Dina and ADEM will have font-weight: 35px, while LiLi still normal. If you want to use more than one style you can do:
$("br").nextAll().css({"color":“beige","font-size":“35px",....});
If you want to only target one paragraph after <br> use the jQuery closest() method.
Related
This question already has answers here:
CSS select elements with partial id
(2 answers)
Closed 6 years ago.
The html page contains div ID s like q1r1, q1r2, q1r3,q2r1,q2r2,q2r3,.... How to select these ID in CSS to apply styles at once? If ID's were just q1,q2, q3.., it could be done as id^="q".
You can do [id^q]:
JS Fiddle
[id^=q] {
// common styles
}
And if there is a certain id you would like to omit you can use [id^=q]:not(#idname):
JS Fiddle
OR if you want to exclude ids that start with a certain pattern, combined the two like:
JS Fiddle
/* All ids that start with "q" but not "qr" */
[id^=q]:not([id^=qr]) {
// Styles here
}
BUT I would absolutely recommend adding a common class since that is for what they are designed. If an id can be added via python, I would think a class could be added as well.
By using '^' selector the styles can be applied
<!DOCTYPE html>
<html>
<head>
<style>
div[id^="q"] {
background: #ffff00;
}
</style>
</head>
<body>
<div id="q1r1">The first div element.</div>
<div id="q1r2">The second div element.</div>
<div id="q2r2">The third div element.</div>
<p id="q2r1">This is some text in a paragraph.</p>
</body>
</html>
I was trying to figure out how to apply horizontal space between elements using ReactJS when I noticed a discrepancy that I can't explain.
SSCCE below: (also in jsfiddle)
<!doctype html>
<html>
<body>
<span>foo</span>
<span style='display:inline-block; width:30px'></span>
<span>bar</span>
<div id='div0'></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"> </script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script type='text/javascript'>
var rce = React.createElement.bind(React);
var x = (rce('div', {}
, rce('span', {}, 'foo')
, rce('span', {style: {display: 'inline-block', width: '30px'}})
, rce('span', {}, 'bar')));
ReactDOM.render(x, document.getElementById('div0'));
</script>
</body>
</html>
The above code produces on the output:
Given that the DOM elements are identical (except for the presence of the data-reactid attributes):
Why then, this discrepancy in the spacing ?
That's because of spacing in your HTML code between inline html elements. React removes it by default.
<span>foo</span><span style='display:inline-block; width:30px'></span><span>bar</span>
DEMO
Same result can be achieved with commenting space in your HTML code.
<span>foo</span><!--
--><span style='display:inline-block; width:30px'></span><!--
--><span>bar</span>
DEMO
Also the code actually does differ. As you can notice there is no whitespace in React's generated HTML.
Consider the w3schools example of the :target selector:
<!DOCTYPE html>
<html>
<head>
<style>
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Jump to New content 1</p>
<p>Jump to New content 2</p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
</body>
</html>
When you click on the anchor referencing another element it styles thep with the corresponding id.
I want the effect of :target but on hover instead. how is this done?
how do you style the thing that href points to in the page on hover?
if this is not possible. what is the best-performing javascript solution?
Because CSS selectors can only traverse from an earlier element to a later sibling, descendant or descendant of a sibling (and cannot select parent, or previous-sibling, elements), this cannot be done with CSS. As hovering the <a> to style the later :target-ed elements would first require traversing to the parent from the hovered-<a> element.
To do this with JavaScript, then, I'd suggest:
// a named function to toggle the highlighting of the
// targeted element:
function highlightTarget(event) {
// the 'event' is passed automagically from the
// addEventListener() method; as is the 'this'
// which is the element to which the event-handler
// (this function) was bound:
// using getAttribute() to get the value of the attribute,
// instead of 'this.href' which would get the absolute URL,
// replacing the leading '#' character with an empty string:
var id = this.getAttribute('href').replace(/^#/, ''),
// getting the element with that id:
target = document.getElementById(id);
switch (event.type) {
// if this is the mouseenter event we add the 'highlight'
// class-name:
case 'mouseenter':
target.classList.add('highlight');
break;
// on 'mouseleave' we remove the class-name:
case 'mouseleave':
target.classList.remove('highlight');
break;
}
}
// iterating over the NodeList returned by
// document.getElementsByTagName(), using
// Array.prototype.forEach():
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
// if the href attribute (not property) begins with a '#':
if (a.getAttribute('href').indexOf('#') === 0) {
// we bind the highlightTarget function to handle
// both the 'mouseenter' and 'mouseleave' events:
a.addEventListener('mouseenter', highlightTarget);
a.addEventListener('mouseleave', highlightTarget);
}
});
.highlight {
background-color: red;
}
<h1>This is a heading</h1>
<p>Jump to New content 1
</p>
<p>Jump to New content 2
</p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b>
</p>
<p id="news2"><b>New content 2...</b>
</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
It is worth noting, though, that the CSS Selectors Module, Level 4, has a proposed solution, the reference-combinator, to address this:
The following example highlights an element when its is focused or hovered-over:
label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px;
}
Which suggests that the correct syntax (which, currently of course, does not work) may be:
a:matches(:hover) /href/ p {
background-color: red;
}
References:
CSS:
Reference combinator (E:matches(:hover) /href/ p).
JavaScript:
Array.prototype.forEach().
Element.getAttribute().
EventTarget.addEventListener().
Function.prototype.call().
Guide to JavaScript Regular Expressions.
String.prototype.indexOf().
String.prototype.replace().
switch () {...} operator.
For Info:
In CSS if link is ahead and adjacent to the target or target's parent, then you could do something similar:
[href="#news1"]:hover ~#news1,
[href="#news2"]:hover ~#news2{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
<h1>This is a heading</h1>
Jump to New content 1
Jump to New content 2
<p>hover link and see target element highlight via <code>[href="#target] ~#target </code></p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>Note:</b> links must be ahead and adjacent to target or parents target in order to work.</p>
To go further and understand ,See: http://www.w3.org/TR/css3-selectors/#attribute-representation
and notice those too : http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators & http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
Im trying to style some autogenerated html. I built a system that allowed me to overlay bootstrap on this autogen stuff and now I want to do some tweaking of whats there.
the autogen produces stuff like this
<dl>...</dl>
Now I want to apply bootstraps dl-horizontal class to that generated tag. Since its generated, I can't simply class it, I can't ID it, nothing. It has to be purely CSS selectors, which is something I know very little about.
What would a CSS tag that does this look like?
you can use jQuery to add a class to your <dl> tag like this:
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
.dl-horizontal {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
jsFiddle Demo.
There is no option in css to add a class. But you can use children selectors to format if all your elements are the children of the same parent.
For example if your elements are a children of the parent body then:
body > dl
{
color : red;
}
The above code will change the text - color of all the elements that are the children of
How to change the color only from text except everything is between tags ?
Sample text:
<b>A7</b> <b>D</b>
this is a test
<b>A7+</b> <b>G9</b>
this is a test
Assuming that all of that text is wrapped in a parent element (I've used <div>, but almost any other element would suffice), as such:
<div>
<b>A7</b>
<b>D</b>
this is a test
<b>A7+</b>
<b>G9</b>
this is a test
</div>
Then you can't change "all the text except the <b> tags", because CSS won't allow you to style the text without affecting the colour of the the <b> elements, you can, however, style the div and then 'unstyle' the b elements:
div {
color: #f00;
}
div b {
color: #000;
}
JS Fiddle demo.
To do this with jQuery (and, honestly, from the information you've posted jQuery seems unnecessary), you'd have to create wrapping elements for each of the strings of characters that are not wrapped in b elements and then directly style, or add a class to, those elements:
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');
JS Fiddle demo.
References:
contents().
filter().
parent().
wrap().
Try:
body{color:red;}
b{color:black;}
Fiddle here.
You could use jQuery like this:
$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');
But if you can do it in CSS it would be better:
body {
color: #FFCCFF;
}
b {
#000000;
}
Since you tagged this as jquery, I just provided a solution for this with jquery, You may wrap the html which was written by you in a paragraph tag like below. And then you have to use the .addClass function of Jquery to set different classes with different colours for that both paragraph and bold tag.
HTML
<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>
CSS
.Paragraph{
color:red;
}
.boldtext{
color:black;
}
JQUERY
$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");
DEMONSTRATION